如何设置选择元素的 selected 属性的值

Question

我正在使用 webmatrix、razor 语法和 cshtml 文件。

我有一个数据库记录的“编辑”页面，其中包含一个选择框（id =“selStatus”）。我试图根据当前正在编辑的记录的值动态设置选择框的“选定”值。

我在本地变量中有当前值或其索引，但我似乎无法将此值分配回选择。

if (currentStatus=="Completed"){
    selStatus.options[1].selected=true;
}

RES = 错误：名称“selStatus”在当前上下文中不存在。

我在这里遗漏了一些明显的东西，但似乎无法理解。任何想法表示赞赏。谢谢

Answer 1

如果您有一个静态选项列表，例如婚姻状况，您可以使其更清晰（对于我们中的某些人而言），如下所示：

<select>
  <option value="Single"   @(marStat == "Single"   ? "selected" : "")>Single</option>
  <option value="Married"  @(marStat == "Married"  ? "selected" : "")>Married</option>
  <option value="Divorced" @(marStat == "Divorced" ? "selected" : "")>Divorced</option>
  <option value="Widowed"  @(marStat == "Widowed"  ? "selected" : "")>Widowed</option>
</select>

这样做的作用是，如果包含从数据库检索的值的 razor 变量 marStat 与条件中的字符串匹配，它会将“选定”呈现到 HTML 中。这是有点“野蛮”的风格，但我相信它非常可读。

Answer 2

在布局站点中：

@{
    if (!IsPost)
    {
        PageData["accountType"] = 0; /* default value */
    }
}
<html>
    <head></head>
    <body>
        <form action="@Href("~/")" method="post">
            <select name="accountType">
                <option value="0"@(PageData["accountType"] == 0 ? " selected" : "")>Standard</option>
                <option value="1"@(PageData["accountType"] == 1 ? " selected" : "")>Golden</option>
                <option value="2"@(PageData["accountType"] == 2 ? " selected" : "")>Ultimate</option>
            </select>
        </form>
    </body>
<html>

在另一个网站上，您可以通过类似的方式访问它

var accountType = Convert.ToInt32(Request["accountType"]);

稍后根据您的需要进行设置

PageData["accountType"] = (required int value);

Answer 3

在 .NET 6 中：

使用 asp-for="@selectedValue"

@{
 string selectedValue = "en-us"
}
<select name="culture" asp-for="@selectedValue">
  <option value="pt-br">Português (Brasil)</option>
  <option value="en-us">English (United States)</option>
</select>

在运行时.NET 将设置选定的属性标记。

Answer 4

除了使用 Javascript 之外，您还可以在创建下拉列表时设置所选项目。

当您有动态生成的下拉列表时，这将起作用。如果您的下拉菜单是静态的，那么您需要使用 javascript。

首先创建将填充下拉列表的数据：

var selectQ = "SELECT StatusName, StatusID FROM MyStatusTable";
List<SelectListItem> statusdropdownlistdata = new List<SelectListItem>();
bool isSelected = false;
foreach(var item in db.Query(selectQ)){
    isSelected = false;
    if(item.StatusName == "Completed"){
        isSelected = true;
    }
    statusdropdownlistdata.Add(new SelectList Item
    {
        Text = item.StatusName,
        Value = item.StatusID.ToString(), 
        Selected = isSelected
    });
}

上述内容将创建您要添加到下拉列表中的数据，并选择符合条件的项目。您必须进行修改才能符合您的特定标准和逻辑。

接下来，将其添加到 cshtml 的 HTML 部分：

@Html.DropDownList("StatusTypes", statusdropdownlistdata)

上面将渲染 ID=“StatusTypes”的下拉列表以及包含所选项目的下拉数据。

查找 Html.DropdownList，您可能会找到其他选项和方法来执行此操作。

我不确定这段代码是否有效，因为我是凭记忆写的

Answer 5

添加这个也感觉很好——我就是这么做的。您还可以使用控制器将值传递给 ViewBag 并抓取它并在视图中进行比较。见下文：在视图中，我将值传递给 ViewBag -

ViewBag. DegreeLevel = userInfo.educationlevel;（用户信息只是我的对象）

然后，我在视图中进行比较，如下所示：

Answer 6

虽然 @bviktor 的答案似乎适用于常规 Razor 页面，但它不适用于 Razor 组件，因为视图在选项中插入

@(isSelected ?

。所以我尝试了 @RDAxRoadkill 的解决方案，它在我的 Razor 组件中有效。我还建议将支票写在单独的行上以提高可读性。

    <select id="yourSelectId" name="yourSelectName">
        @foreach(var obj in objList)
        {
            bool isSelected = obj.Key == expectedKey;
    
            <!-- Works in Razor views -->
            <!option value="obj.Key" @(isSelected ? "selected" : "")>
                @obj.Value
            </!option>
    
            <!-- Works in Razor components -->
            <!option value="obj.Key" selected=@isSelected>
                @obj.Value
            </!option>
        }
    </select>

Answer 7

这对我有用

<select class="form-control" id="destinationId" name="DestinationId">
                                @foreach (var destination in Model.Destinations)
                                {
                                    if (destination.Id == d.DestinationId)
                                    {
                                        <option value="@destination.Id" selected="selected">@destination.DestinationName</option>
                                    }
                                    else
                                    {
                                        <option value="@destination.Id">@destination.DestinationName</option>
                                    }
                                }
                            </select>

如何设置选择元素的 selected 属性的值

问题描述投票：0回答：7

7个回答

最新问题

如何设置选择元素的 selected 属性的值

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7