Question

简

我正在尝试将 admin__control-select 类的所有下拉框的值更改为删除，当删除所有按钮为压

问题

以下代码似乎有效，但只更新第一个选择框的值。我尝试使用querySelectorAll，但这根本不起作用。

代码

<script type="text/javascript">
    var selectFunction = function() {
        document.querySelector('.admin__control-select').value = "remove";
    };
</script>

<select class="admin__control-select">
    <option value="defaultValue">Default</option>
    <option value="Option1">Option1</option>  
    <option value="remove">Remove</option>
</select>

<select class="admin__control-select">
    <option value="defaultValue">Default</option>
    <option value="Option1">Option1</option>
    <option value="remove">Remove</option>
</select>

<input type="button" value="Remove All" onclick="selectFunction()" />

Answer 1

使用querySelectorAll()，它返回一个匹配元素的数组。

然后，使用for()遍历数组。

var elms = document.querySelectorAll('.admin__control-select');
for(var i=0; i<elms.length; i++){
  elms[i].value ='remove';
}

Answer 2

试试这个：

＆＃13;

<script type="text/javascript">
    var selectFunction = function() {
        var selects = document.querySelectorAll('.admin__control-select');
        selects.forEach(s => s.value = 'remove');
    };
</script>

<select class="admin__control-select">
    <option value="defaultValue">Default</option>
    <option value="Option1">Option1</option>  
    <option value="remove">Remove</option>
</select>

<select class="admin__control-select">
    <option value="defaultValue">Default</option>
    <option value="Option1">Option1</option>
    <option value="remove">Remove</option>
</select>

<input type="button" value="Remove All" onclick="selectFunction()" />

＆＃13;

querySelectorAll()

返回元素，因此您必须循环它们并设置value属性。

更新具有相同类的所有下拉框

2 个答案: