Tomatron Tomatron - 2 months ago 13
HTML Question

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

So I managed to change the options in the second dropdown depending on the choice in the first, however I want the user to be able to select multiple options in the first and all realted options then shown in the second dropdown.

So far I have this:

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

});
});


As you can see choosing a single option from dropdown 1 works, but choosing multiple options does not add all the options into dropdown 2.

eg. If you select 'Kent' and 'Sussex' you should see in dropdown two 'Kent Park 1', 'Kent Park 2', 'Sussex Park 1, Sussex Park 2'

Look forward to your help!

Answer

All three conditions should be changed from if ($(this).val() == "Kent") { to if (selected_val.indexOf("Kent") !== -1) { and on change event make remove the options only once at top.

Please check below snippet for more details.

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