根據第一個多選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>