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>

score 0 · Accepted Answer · answered Dec 06 '22 at 16:32

0

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.

answered Dec 06 '22 at 16:32

Twisty

30,304
2
26
45

1) very very thanks to you , code is working fine , ....can you also pls advice how it will be show dropdown checkbox to select the option , it will be great help if you will advice on this /// i try this ..... – ravi Dec 07 '22 at 14:04
2 ) // i try this .... but its working only for country Not for state – ravi Dec 07 '22 at 14:04
@ravi your comments are not clear, so I do not know how to answer. As this answeres your original question, you might consider marking it as the answer. I would suggest you give it a try, work on it, and if you need more help. Post a new question if needed. – Twisty Dec 07 '22 at 15:59
your code is working fine & lots of thanks to you ! ,, but it should be like - when user click on select , it should display all option dropdown with checkbox and user can select option by click on checkbox-- just like other normal multiselect dropdown – ravi Dec 07 '22 at 16:28
@ravi the Select HTML Element does not offer this. Look at: https://stackoverflow.com/a/27547021/463319 – Twisty Dec 07 '22 at 16:56
doesn't work i try this also - but its work only in Country NOT on STATE , Ok Sir Thanks For your all effort , Thanks A Lot !! ( I don't know how in many days i will solve this ) , Have a good day Sir ! – ravi Dec 07 '22 at 17:31
@ravi your `.multiselect()` is an add-in from another library, it is not native to jQuery. – Twisty Dec 07 '22 at 19:04
Dear sir basically you understand that what i want , can you pls advice me a better workable code in -> ( var array [ ] multiple dependent dropdown select option for country and state ) , as i have searched every where on net but failed to find any example or tutorial on this subject , yes there are many examples based on fetch data from mysql database but not in ARRAY VAR ( Without database ) , still thanks to you Sir ! – ravi Dec 07 '22 at 19:36
@ravi as I suggested, I would suggest marking an answer as the selected answer for this question. If you need more help, you can ask another question. I have already provided an answer and reference to another answer that addresses all your questions. – Twisty Dec 07 '22 at 21:49
i have marked your answer and also add the question as you said pls have a look on this link - https://stackoverflow.com/questions/74732602/multi-select-pillbox-for-dependent-dropdown-in-boxes – ravi Dec 08 '22 at 19:05

Multiselect dependent dropdown for country and state

1 Answers1