javascript - jQuery 切换多下拉选择

Question

在我的 PHP 页面中，我有一些像这样的下拉菜单:

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

我希望创建一个按钮，能够一次更改所有下拉列表的类别。

如何使用 jQuery 或 Javascript 创建一个按钮来一次切换选择所有下拉菜单？

Answer 1

“不，我希望创建一个新的下拉菜单，以便一次切换所有其他下拉菜单选项。 – Simone”

此 jQuery 代码使用 HTML 更改值 value=""不是 <option> 里面写的内容标签 - 太容易犯错误。让我知道这是否是您正在寻找的内容。

干杯!

<小时/>

$(".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>