Question

所以我设法在第二个下拉列表中更改选项，具体取决于第一个选项中的选项，但我希望用户能够在第一个和所有已实现的选项中选择多个选项，然后在第二个下拉列表中显示。

到目前为止，我有这个：

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

例如。如果您选择'肯特'和'苏塞克斯'，您应该在下拉列表中看到两个'Kent Park 1'，'Kent Park 2'，'Sussex Park 1，Sussex Park 2'

期待您的帮助！

Answer 1

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

请查看以下代码段了解更多详情。

＆＃13;

$(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);
    }

  });
});

＆＃13;

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

＆＃13;

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

1 个答案: