Update all dropdown boxes with the same class

Question

Brief

I am attempting to change the value of all dropdown boxes with the class of admin__control-select to remove when the Remove All button is pressed

Issue

The below code appears to work, but only updates the value of the first select box. I tried using querySelectorAll but that doesn't work at all.

Code

<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()" />

score 0 · Accepted Answer · answered Nov 28 '17 at 15:22

0

Use querySelectorAll(), it returns an Array with matched elements.

Then, traverse the array with for().

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

answered Nov 28 '17 at 15:22

CoursesWeb

4,179
3
21
27

score -1 · Answer 2 · answered Nov 28 '17 at 15:19

Try this:

<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()" />

querySelectorAll()

returns the elements so you have to loop over them and set the value property.

Update all dropdown boxes with the same class

2 Answers2