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

Question

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

到目前为止我有这个：

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 中。

例如。如果你 select 'Kent' 和 'Sussex' 你应该在下拉列表中看到两个 'Kent Park 1', 'Kent Park 2', 'Sussex Park 1, Sussex Park 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>

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

Populating a dropdown depending on the selction of the first multiple select dropdown

html

javascript

jquery

dropdown