无法使用 JQuery 设置下拉列表的值答案

【问题标题】：Unable to set the value of a dropdown using JQuery无法使用 JQuery 设置下拉列表的值
【发布时间】：2017-01-03 18:46:06
【问题描述】：

我正在使用@Html.DropDownListFor。填充下拉列表没有问题，但我无法使用 JQuery 设置选定的值。这是代码的简化版本。

@{
var listItems = new List<ListItem>
    {
            new ListItem { Text = "Select Question", Value = "Select Question" },
new ListItem { Text = "test", Value = "test" }
}


<div class="row">
      @Html.LabelFor(m => m.SecurityQuestion, new { @class = "control-label" })
</div>
<div class="row">
      @Html.DropDownListFor(m => m.SecurityQuestion, new SelectList(listItems, "Value", "Text"), new { id = "security", @class = "securityALLQuestion" })
</div>
<div class="row">
      @Html.LabelFor(m => m.SecurityQuestion1, new { @class = "control-label" })
</div>
<div class="row">
      @Html.DropDownListFor(m => m.SecurityQuestion1, new SelectList(listItems, "Value", "Text"), new {id="security1", @class="security" })
</div>

这是我设置它的 Javascript 函数。我从#security 下拉列表中获取所有值，然后使用它来设置#security1 下拉列表。

$('.security').on('change', function () {
    var values = [];
    var optionValues = [];

    $('#security option').each(function () {
        values.push($(this).attr('value'));
    });

    for (var i = 0; i < values.length; i++) {
        optionValues[i] = "<option value=\"" + values[i] + "\">" + values[i] + "</option>";
    }

var temp ='test'
$('#' + 'security1').html('').html(optionValues);
$('#' + 'security1').val(temp);
})

values[] 和 optionValues[] 的值符合预期。

在检查控制台时，我得到了 temp 的值，但整个语句的警报为空。我错过了什么吗？

可能的问题：是不是因为我只设置了问题的值而不是文本？

【问题讨论】：

控制台有错误吗？
@Alexandru-IonutMihai 控制台没有错误。
请试试这个：$('#security1').val(temp).
不改变任何东西。我在引用该控件时存在一些问题。
我想我遇到了您遇到的问题：将new {id="security1"} 更改为new {@id="security1"}。您在id 之前缺少@ 符号。另一种解决方案（没有另一个id）是直接使用$('#SecurityQuestion1').val(temp)。

标签： javascript c# jquery asp.net-mvc razor

【解决方案1】：

这需要做两件事：

您有一个对选择元素的有效 jQuery 引用
您尝试设置的值完全与包含的选项元素的 value 属性之一匹配。

首先，确保您正确选择了选择元素。使用console.log 将$('#' + security1) 的值输出到浏览器的开发者控制台。此外，请确保 JavaScript 变量 security1 既存在并拥有您期望的相应 ID。

一旦您确定 jQuery 元素引用是正确的，请查看生成的页面 HTML 中的选项（查看源代码）。检查temp 的值（可能将其记录到控制台以确保）并将其与这些选项的值属性进行比较。它必须完全匹配，否则不会导致选项被标记为选中。

【讨论】：

我确实检查了您的两个问题，它们完全符合要求。如果它可以帮助您识别问题，我已经添加了额外的代码。
您正在清除 select innerHTML，但从不添加任何选项（values 是一个空列表）。因此，它不能将值设置为“test”，因为实际上没有具有该值的选项；没有选项期。
values.push($(this).attr('value'));用于设置值。我得到下拉列表中的值。只有选定的值为空白才是问题所在。

【解决方案2】：

这样就解决了

$("#custom_address_to").get(0).selectedIndex = 1;

如果你想在下拉列表中选择第一个元素

【讨论】：