无法在 javascript 中更改 html 选择选定值答案

【问题标题】：Can't change html select selected value in javascript无法在 javascript 中更改 html 选择选定值
【发布时间】：2017-05-17 19:41:32
【问题描述】：

我需要使用 javascript 在选择对象中更改 html 选项元素的“选定”属性。

我已经试过了：Solution

这就是我所拥有的：

.cshtml

<div class="form-group form-group-default" id="divStateEUA">
   <label>Estado</label>
   <select id="listStateEUA" name="listStateEUA" data-init-plugin="select2" style="width: 100%">
      @foreach (var state in ViewBag.EUAStates)
      {
         <option>@state</option>
      }
     </select>
</div>

javascript

<script>
    $(document)
        .ready(function () {
                 CheckState();
    });

   function CheckState() {
     if (selectedText == 'Estados Unidos') {
        var element = document.getElementById('listStateEUA');
        element.value = 'Chicago';
     }
   }
</script>

渲染的html：

仍然无法正常工作。有什么想法吗？

【问题讨论】：

你能把渲染后的 HTML 代码贴出来吗？
selectedText 定义在哪里？
看起来您可能正在使用 select2 插件，我相信它有自己的方法来设置所选值。
@Gavin selectedText 没问题。我输入并提醒看它是否进入那个'if'。
如果您使用 asp.net-mvc，为什么不使用 HtmlHelper 进行下拉菜单？

标签： javascript jquery html asp.net asp.net-mvc

【解决方案1】：

您在select 的option 标记中缺少value 属性。

修改您的剃须刀代码，在option 标签中添加value 属性，以便您可以根据值更改组合框选择：

 @foreach (var state in ViewBag.EUAStates)
 {
    <option value="@state">@state</option>
 }

现在在您的 jquery 代码中，您应该能够做到：

function CheckState() {
     if (selectedText == 'Estados Unidos') {
        $("#listStateEUA").val("Chicago");
     }
   }

【讨论】：

在 chrome 中通过开发控制台调试并查看代码执行流程，如果块被跳过，因为条件可能不会评估为真
条件为真

【解决方案2】：

您必须为选项提供一个值。您的 JS 正在尝试将选择设置为“芝加哥”值，但不存在。 <option>Chicago</option> 与 <option value="Chicago">Chicago</option>

function CheckState() {
  var element = document.getElementById('listStateEUA');
  element.value = 'chicago';
}

CheckState();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <label>Estado</label>
  <select id="listStateEUA" name="listStateEUA">
    <option value="nevada">nevada</option>
    <option value="chicago">chicago</option>
    <option value="arizona">arizona</option>
  </select>

【讨论】：

【解决方案3】：

正如 Mike McCaughan 建议的那样（非常感谢），由于我使用的是 select2 插件，它有不同的方式来获取和设置值。

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

在这里找到答案：select2 plugin get and set values

【讨论】：