如何使用 jquery 在 onChange 上保持多个 select 同步

Question

我正在想办法让两个或多个 select 保持同步。我实际上创建了几个 select 元素（我不确定这是否是最准确的方法，如果有人告诉我还有其他方法，我将不胜感激）。

如果我在第一个里selectNorth America，只有select和id="north"会自动显示，其他的会保持隐藏状态，如果我改成Central America，其余的也会改变，只显示 select 和 id="central"，其余隐藏。

这是我目前得到的：

<select id="continent">
    <option value="1">North America</option>
    <option value="2">Central America</option>
    <option value="3">South America</option>
</select>

<select id="north">
    <option value="1">Canada</option>
    <option value="2">USA</option>
    <option value="3">Mexico</option>
</select>

<select id="central">
    <option value="1">Guatemala</option>
    <option value="2">Costa Rica</option>
    <option value="3">Nicaragua</option>
</select>

<select id="south">
    <option value="1">Brazil</option>
    <option value="2">Argentina</option>
    <option value="3">Chile</option>
</select>

到目前为止，我只需要同步两个具有相同值的 select：

$("#continent").change(function(){
    $("#north").val($("#continent").val())
});

然而，这远远不是我需要的。谁能帮我找出正确的方法？

提前致谢！

Answer 1

如果您不介意使用一些不同的 ID，您可以这样做：

首先更改其他选择的id。

<select id="continent">
    <option value="1">North America</option>
    <option value="2">Central America</option>
    <option value="3">South America</option>
</select>

<select id="group-1" class="country-group">
    <option value="1">Canada</option>
    <option value="2">USA</option>
    <option value="3">Mexico</option>
</select>

<select id="group-2" class="country-group">
    <option value="1">Guatemala</option>
    <option value="2">Costa Rica</option>
    <option value="3">Nicaragua</option>
</select>

<select id="group-3" class="country-group">
    <option value="1">Brazil</option>
    <option value="2">Argentina</option>
    <option value="3">Chile</option>
</select>

然后隐藏所有选择，只显示与您想要的大陆相关的选项。

$("#continent").change(function(){
  $(".country-group").val()).hide();
  $("#group-"+$("#continent").val()).show();
});

作为替代方案，如果您真的不需要所有内容都在不同的选择中，您可以使用 Option Groups 之类的东西。根据 w3schools，所有浏览器都支持它。

<select>
  <optgroup label="North America">
    <option value="1">Canada</option>
    <option value="2">USA</option>
    <option value="3">Mexico</option>
  </optgroup>
  <optgroup label="Central America">
    <option value="1">Guatemala</option>
    <option value="2">Costa Rica</option>
    <option value="3">Nicaragua</option>
  </optgroup>
  <optgroup label="South America">
    <option value="1">Brazil</option>
    <option value="2">Argentina</option>
    <option value="3">Chile</option>
  </optgroup>
</select>

或者，如果您想使用添加额外功能的 prettier/handier JS 库，您可以查看 Select2, Chosen or Selectize's Option Groups

Answer 2

首先，您需要 select selected 选项的文本，并获取它的第一部分，即其他 select 的 id。然后隐藏 select 的所有兄弟姐妹并显示 select 具有特定的 id.

$("#continent").change(function(){
    var id = $(this).find("option:selected").text().split(" ")[0].toLowerCase();
    $(this).siblings().hide().siblings("#"+id).show();
}).siblings().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="continent">
    <option value="">Select one</option>
    <option value="1">North America</option>
    <option value="2">Central America</option>
    <option value="3">South America</option>
</select>
<select id="north">
    <option value="1">Canada</option>
    <option value="2">USA</option>
    <option value="3">Mexico</option>
</select>
<select id="central">
    <option value="1">Guatemala</option>
    <option value="2">Costa Rica</option>
    <option value="3">Nicaragua</option>
</select>
<select id="south">
    <option value="1">Brazil</option>
    <option value="2">Argentina</option>
    <option value="3">Chile</option>
</select>

如何使用 jquery 在 onChange 上保持多个 select 同步

How to keep multiple select in sync onChange using jquery

html

javascript

jquery

listbox

onchange