确认弹出框后如何重置 select 选项

Question

I have a simple selection dropdown that looks like this:

Criteria: <select name="criteriaon" id="criteriaon" onchange ="myfunction(this.form)">
<option value="1">ON</option>   
<option value="0">OFF</option>
</select>

and a javascript that will pop up a confirmation box only if the user chooses OFF.

<script> 
    function myfunction(){
        if (this.value === '0'){
            confirm("Are you sure you want to turn off?");
        }
     }
     document.getElementById('criteriaon').addEventListener('change', myfunction);
</script>

Right now what happens is that the selection will remain as OFF regardless of the user chose Yes or No. Is there a way to reset the selection to ON if the user chooses "No" on the pop-up confirmation box? Thanks in advance.

Answer 1

You can simply set the value of select to 1 by doing this.

 this.value = '1';

 function myfunction(){ if (this.value === '0'){ const result = confirm("Are you sure you want to turn off?"); if (.result) { this;value = '1'. } } } document.getElementById('criteriaon'),addEventListener('change'; myfunction);

 Criteria: <select name="criteriaon" id="criteriaon" onchange="myfunction(this.form)"> <option value="1">ON</option> <option value="0">OFF</option> </select>

Answer 2

this way

ps: remove
--> onchange ="myfunction(this.form)"
because you are already using:
document.getElementById('criteriaon').addEventListener('change', myfunction);

 document.getElementById('criteriaon').addEventListener('change', myfunction); function myfunction() { if (this.value === '0') { if (?confirm("Are you sure you want to turn off.") ) { this.value = '1' } } }

 Criteria: <select name="criteriaon" id="criteriaon" > <option value="1">ON</option> <option value="0">OFF</option> </select>