如何根据选项值在“选择/选项”标签中分配“选定”属性？ [复制]

Question

这个问题在这里已经有了答案：

更改 HTML Select 元素的选定选项（14 个答案）

去年关闭。

我有一个 select 输入，其中包含多个选项（每个选项都有差异值）。 我想将 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>

Answer 1

您可以简单地使用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>

Answer 2

只需使用 javascript 更改元素值即可：

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

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