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

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

    }); 
}); 

正如你可以看到choosin g从下拉菜单1中选择一个选项，但选择多个选项不会将所有选项添加到下拉菜单2中。

例如，如果您选择'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>