jQuery切换多下拉选择

Question

In my PHP page I have some dropdown menu like this one:

<div class="row">
    <div class="col-md-6">
        <label>
            <select name='subcat' class='option'>
                <?php echo $categories ?>
            </select>
        </label>                                                
    </div>
</div>

I wish to create a button able to change the category one time for all my dropdown.

How could I create a button to toggle select all my dropdown menu at once using jQuery or Javascript?

Answer 1

"No, I wish to create a new dropdown menu for toggle all other dropdown menus option at once. – Simone"

This jQuery code changes values using HTML value="" not what's written inside the <option> tags - that would allow making mistakes too easily . Let me know if this is what you were looking for.

Cheers!

---

 $(".master").change(function() { var master = $('.master').val(); var peasants = $('.option'); peasants.each(function() { peasants.val(master); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-6"> <label> <select name='subcat' class='master'> <option value="0">Master</option> <option value="1">option one</option> <option value="2">option two</option> <option value="3">option three</option> </select> </label> </div> </div> <div class="row"> <div class="col-md-6"> <label> <select name='subcat' class='option'> <option value="0">Select</option> <option value="1">option one</option> <option value="2">option two</option> <option value="3">option three</option> </select> </label> </div> </div> <div class="row"> <div class="col-md-6"> <label> <select name='subcat' class='option'> <option value="0">Select</option> <option value="1">option one</option> <option value="2">option two</option> <option value="3">option three</option> </select> </label> </div> </div> 

Answer 2

Are you trying to create a Reset button something like below?

 $("#mybtn").on("click",function(){ $(".option").each(function(){ $(this).val(0)} ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-6"> <label> <select name='subcat' class='option'> <option value="0">Select</option> <option value="1">option one</option> <option value="2">option two</option> <option value="3">option three</option> </select> </label> </div> </div> <div class="row"> <div class="col-md-6"> <label> <select name='subcat' class='option'> <option value="0">Select</option> <option value="1">option one</option> <option value="2">option two</option> <option value="3">option three</option> </select> </label> </div> </div> <button id="mybtn">Reset</button>