0

As the title says, Im trying to change the values on multiple dropdowns by changing a single dropdown. The multiple dropdowns need to get the same value that is selected in the "Select All" dropdown. Something very similar to a check all for checkboxes.

<select name="changeAll" id="changeAll" onchange="changeAll(this);">
  <option value="select" selected="selected">Select</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="currency1" class="form-control">
  <option selected value="option1" disabled>Option 1</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="currency2" class="form-control">
  <option selected value="option1" disabled>Option 1</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="currency3" class="form-control">
  <option selected value="option1" disabled>Option 1</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

The idea is that when a value is selected in the first dropdown "changeAll", all of the other dropdowns will have their values change to match the one selected in the "changeAll" dropdown.

Any help with this would be greatly appreciated.

5abre
  • 51
  • 10

1 Answers1

2

Based on what you asked, I have tried to simulate. Try to run. Thnx

  $('select#changeAll').on('change', function() {
    var val_ = $('#changeAll :selected').text();
    $('.child-changed option').map(function() {
     $(this).text(val_);
      $(this).value=val_;
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select name="changeAll" id="changeAll" >
  <option value="ca_select" selected="selected">Select</option>
  <option value="ca_option1">ca Option 1</option>
  <option value="ca_option2">ca Option 2</option>
  <option value="ca_option3">ca Option 3</option>
</select>
<div>
</div>
<select id="currency1" class="form-control child-changed">
  <option selected value="c1_option1_selected" disabled>currency1 Option 1</option>
  <option value="c1_option1">currency1 Option 1</option>
  <option value="c1_option2">currency1 Option 2</option>
  <option value="c1_option3">currency1 Option 3</option>
</select>
<div>
</div>
<select id="currency2" class="form-control child-changed">
  <option selected value="c2_option1_selected" disabled>currency2 Option 1</option>
  <option value="c2_option1">currency2 Option 1</option>
  <option value="c2_option2">currency2 Option 2</option>
  <option value="c2_option3">currency2 Option 3</option>
</select>
<div>
Kumar Ashutosh
  • 1,121
  • 10
  • 33