Question

我正在试图弄清楚如何保持同步两个或更多选择。我实际上创建了几个选择元素（我不确定这是否是最准确的方法，如果还有另一种方式，如果有人告诉我，我会感激不尽）。

如果我在第一个选择North America，则只有id="north"的选择会自动显示而其他选项将保持隐藏状态，如果我更改为Central America，则其余内容将更改为好吧，只显示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>

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

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

或者如果您想使用更漂亮/更方便的JS库来增加额外的功能，您可以查看Select2，Chosen或Selectize's Option Groups

Answer 2

首先，您需要选择selected选项的文字，然后获取其他id select的第一部分。然后隐藏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

2 个答案: