Question

正如标题所述，我试图通过更改单个下拉菜单来更改多个下拉菜单中的值。多个下拉列表需要获得在“全选”下拉列表中选择的相同值。与复选框的全部选中非常相似。

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

这个想法是，当在第一个下拉列表“ changeAll”中选择一个值时，所有其他下拉列表的值都会更改，以匹配在“ changeAll”下拉列表中选择的值。

任何帮助，将不胜感激。

Answer 1

根据您的要求，我尝试进行模拟。尝试运行。 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>

通过从一个下拉菜单中进行选择来更改多个下拉菜单值

1 个答案: