Multiselect dependent dropdown for country and state

Question

kindly help how to make this multiple option select for country and state, below code in single select is working fine but i need to make this multi-select dependent dropdown.

below code is complete code working for single select but i dont know how to make it work in multiselect

<form class="form-signin" method="post" id="serchform" action="search-profile-result.php?page_id=1">
    
<label for="country">Country</label>
<select class="form-control" id="country" name="country[]" required="required" onchange="setStates(this);" multiple>
    
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option> </select>
    
<label for="state">State</label>
<select id="state" name="state[]" class="form-control" required="required" multiple>
<option disabled>Select Country First</option>  </select>

</form>

<script>
var states = new Array();

states['USA'] = new Array('Alabama','Alaska','Arizona','Other');
states['UK'] = new Array('Aberdeenshire','Angus','Antrim','Other');
states['Canada'] = new Array('Alberta','British-Columbia','Manitoba','Other');

function setStates() {
countrSel = document.getElementById('country');
stateList = states[countrSel.value];
changeSelect('state', stateList, stateList);
}
function changeSelect(fieldID, newOptions, newValues) {
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
for (i=0; i<newOptions.length; i++) {
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(function() {
setStates();
}); 
</script>

Answer 1

Consider the following.

$(function() {
  //Populate an Object: { Country: [ States... ] }
  var states = {};
  states['USA'] = new Array('Alabama', 'Alaska', 'Arizona', 'Other');
  states['UK'] = new Array('Aberdeenshire', 'Angus', 'Antrim', 'Other');
  states['Canada'] = new Array('Alberta', 'British-Columbia', 'Manitoba', 'Other');

  $("#country").change(function() {
    // Array Variable to contain all selected
    var selected = [];
    // Iterate all selected items
    $.each($(this).val(), function(i, country) {
      selected = selected.concat(states[country]);
    });
    // Remove previous options
    $("#state > option").remove();
    if (selected.length === 0) {
      // Add placeholder and Stop
      $("#state").append("<option disabled>Select Country First</option>");
      return false;
    }
    selected.sort();
    // Populate Options
    $.each(selected, function(i, state) {
      $("<option>").html(state).appendTo("#state");
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-signin" method="post" id="serchform" action="search-profile-result.php?page_id=1">
  <label for="country">Country</label>
  <select class="form-control" id="country" name="country[]" required="required" multiple>
    <option value="USA" label="USA">USA</option>
    <option value="UK" label="UK">UK</option>
    <option value="Canada" label="Canada">Canada</option>
  </select>
  <label for="state">State</label>
  <select id="state" name="state[]" class="form-control" required="required" multiple>
    <option disabled>Select Country First</option>
  </select>
</form>

Summary

When the User selects one or more Countries, a sorted list of States is populated based on the Users selections. If no Countries are selected, a disabled option reminding the User to select a Country.

In JavaScript, Arrays cannot have named indexes, only Integers. So we use an Object to store the States, Indexed by their countries.