根据第一个多个select下拉列表的选择填充下拉列表

Question

因此，我设法改变了第二个下拉列表中的选项，这取决于第一个下拉列表中的选项，但是我希望用户能够在第一个下拉列表中选择多个选项，然后在第二个下拉列表中显示所有的实际选项。

到目前为止我有这样的想法：

https://jsfiddle.net/jkxzy87v/1/

<select name="County" id="county" multiple="multiple">
  <option value="Kent">Kent</option>
  <option value="Sussex">Sussex</option>
  <option value="Devon">Devon</option>
</select>
<select name="Park" id="parks">
  <option>Select a park</option>
</select>

Jquery

$(document).ready(function() {
  $county = $("select[name='County']");
  $Park = $("select[name='Park']");

  $county.change(function() {

    if ($(this).val() == "Kent") {
      $("select[name='Park'] option").remove();
      $("<option>Kent Park 1</option>").appendTo($Park);
      $("<option>Kent Park 2</option>").appendTo($Park);
    }

    if ($(this).val() == "Sussex") 
    {
      $("select[name='Park'] option").remove();
      $("<option>Sussex Park 1</option>").appendTo($Park);
      $("<option>Sussex Park 2</option>").appendTo($Park);
    }

    if ($(this).val() == "Devon") 
    {
      $("select[name='Park'] option").remove();
      $("<option>Devon Park 1</option>").appendTo($Park);
      $("<option>Devon Park 2</option>").appendTo($Park);
    }

  });
});

如您所见，从下拉列表1中选择一个选项是有效的，但是选择多个选项并不会将所有选项添加到下拉列表2中。

例如：如果你选择‘肯特’和‘苏塞克斯’，你应该在下拉两个‘肯特公园1'，’肯特公园2'，‘苏塞克斯公园1号，苏塞克斯公园2号’。

期待你的帮助！

Answer 1

所有这三个条件都应该从if ($(this).val() == "Kent") {更改为if (selected_val.indexOf("Kent") !== -1) {，并且在change事件中，在顶部只删除一次选项。

有关更多细节，请查看下面的片段。

​

$(document).ready(function() {
  $county = $("select[name='County']");
  $Park = $("select[name='Park']");

  $county.change(function() {
    var selected_val = $(this).val();
    $("select[name='Park'] option").remove();
    if (selected_val.indexOf("Kent") !== -1) {
      $("<option>Kent Park 1</option>").appendTo($Park);
      $("<option>Kent Park 2</option>").appendTo($Park);
    }

    if (selected_val.indexOf("Sussex") !== -1) 
    {
      $("<option>Sussex Park 1</option>").appendTo($Park);
      $("<option>Sussex Park 2</option>").appendTo($Park);
    }

    if (selected_val.indexOf("Devon") !== -1) 
    {
      $("<option>Devon Park 1</option>").appendTo($Park);
      $("<option>Devon Park 2</option>").appendTo($Park);
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="County" id="county" multiple="multiple">
  <option value="Kent">Kent</option>
  <option value="Sussex">Sussex</option>
  <option value="Devon">Devon</option>
</select>
<select name="Park" id="parks">
  <option>Select a park</option>
</select>

​