javascript - 无法更改 html 选择 JavaScript 中的选定值

Question

我需要使用 JavaScript 更改 select 对象内 html 选项元素的“selected”属性。

我已经尝试过这个: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:

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

Answer 1

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

修改您的 razor 代码，在 option 标记中添加 value 属性，以便您可以根据值更改组合框选择:

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

现在在您的 jquery 代码中，您应该能够执行以下操作:

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