最初の複数の選択ドロップダウンの選択に応じてドロップダウンに値を設定

Question

最初の選択肢に応じて2番目のドロップダウンのオプションを変更することができましたが、最初に複数のオプションを選択できるようにしたい2番目のドロップダウンに表示されたすべてのリアルタイムされたオプションが表示されます。あなたがchoosinを見ることができるように

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

    }); 
}); 

：これまでのところ、私はこれを持って

gドロップダウン1の1つのオプションが機能しますが、複数のオプションを選択してもすべてのオプションがドロップダウン2に追加されるわけではありません。

例： 「Kent」と「Sussex」を選択すると、ドロップダウンで「Kent Park 1」、「Kent Park 2」、「Sussex Park 1」、「Sussex Park 2」

が表示されます。

Answer 1

すべての3つの条件は、if ($(this).val() == "Kent") {からif (selected_val.indexOf("Kent") !== -1) {に変更する必要があります。また、変更イベントでは、オプションを一番上に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>