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

Question

因此，我设法根据第一个下拉列表中的选择更改第二个下拉列表中的选项，但是我希望用户能够在第一个下拉列表中选择多个选项，然后在第二个下拉列表中显示所有相关选项。

到目前为止我有这个:

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

HTML

<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) { 并在更改事件时仅删除顶部的选项一次。

请检查下面的代码片段以了解更多详细信息。

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