CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
NineCattoRules
NineCattoRules

Reputation: 2428

jQuery Toggle Multi Dropdown Select

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?

Upvotes: 0

Views: 728

Answers (2)

AWA
AWA

Reputation: 446

"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>

Upvotes: 2

Yon Glory
Yon Glory

Reputation: 86

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>

Upvotes: 1

Related Questions