如何根据选项值在“选择/选项”标签中分配“选择的”属性？

问题描述

我有一个select输入，其中包含多个选项（每个选项都有diff值）。我想将attr'selected'分配给与X值相对应的任何选项。 这是我的代码：

// For example if x=3,then I need the option with value=3 to be 'selected'. 
// How do I achieve that?

<select class="className" name="profile" id="profile">
                <option value="1">Lion</option>
                <option value="2">Tiger</option>
                <option value="3">Panther</option>
                <option value="4">Leopard</option>
                <option value="5">Jaguar</option>    
</select>

解决方法

您可以简单地使用querySelector方法，for循环和DOMContentLoaded来确保始终将选项加载到DOM上。

演示：

document.addEventListener('DOMContentLoaded',function() {
  var x = '3' //x=3
  var select = document.querySelector('#profilepicChoice');
  var option = select.options;
  for (var opt,j = 0; opt = option[j]; j++) {
    if (opt.value == x) {
      select.selectedIndex = j;
      break;
    }
  }
})

<select class="form-control form-control-lg" name="profilepic" id="profilepicChoice">
  <option value="1">Lion</option>
  <option value="2">Tiger</option>
  <option value="3">Panther</option>
  <option value="4">Leopard</option>
  <option value="5">Jaguar</option>
</select>

,

您可以通过使用javascript更改元素值来实现：

<script>
    // sample x value
    var x = 3;

    (function() {
        var dropdown = document.getElementById('profile');
        dropdown.value = x;
    })();
</script>