JQuery every cycle at a time
<script type="text/javascript"> $(document).ready(function () { var country = ["United States", "Canada", "Australia", "United Kingdom"]; var state = { "United States": "Alaska", "United States" : "Alabama" }; $(this).click(function () { if ($.inArray($(this).val(), country)) { $.each(state, function (key, val) { if ($("#country").val() == key) { $("#state").append("<option value=" + val + ">" + val + "</option>"); } }); } }); }); </script> Basically, what I'm trying to do, I have Multi-select for countries, I want to fill out "#state" based on the fact that the user clicks on "Countries", right now he shows only the first "Alaska" element under multiple selection.
Not quite sure what I'm doing wrong.
You can not:
var state = { "United States" : "Alaska", "United States" : "Alabama" }; The keys in the object must be unique. The second "United States" key overwrites the first "United States" key, leaving your object simple:
var state = { "United States" : "Alabama" }; Instead, you will need to save an object that maps countries to states:
var state = { "United States" : ["Alaska", "Alabama"], "United Kingdom" : ["Scotland", "England"] // "states" in the UK? }; ... and then change the click handler accordingly:
$(this).click(function () { if ($.inArray($(this).val(), country)) { $.each(state, function (key, val) { if ($("#country").val() == key) { $.each(val, function (i, name) { $("#state").append("<option value=" + name + ">" + name + "</option>"); }); } }); } }); Note :
The
$(this).click()selector is most likely incorrect. This should probably be an identifier or class selector (e.g.$('#your_id'),$('.your-class')).You probably want to clear
$('#state')before you add it. To do this, add$(this).children().remove()to the click handler (but outside the loops).I'm not sure why you are holding an array of country names, as well as the names of countries that display objects in states; delete using
countryand just usestatekeys to get your countries.Remember that
$().val()for multi-select returns an array of results, not a single value.
When considering all these notes and with some different. tidying, here is the code I came up with:
$(document).ready(function () { var countries = { "United States": ["Alaska", "Alabama"], "United Kingdom": ["Scotland", "England"] // "states" in the UK? }; // SETUP: Ignore this bit. Object.keys(countries).forEach(function (val) { $('#multiselect').append('<option value="' + val + '">' + val + '</option>'); }); // END SETUP. $('#multiselect').change(function () { var vals = $(this).val(); var states = $('#state'); states.children().remove(); jQuery.each(vals, function (i, name) { var country = countries[name]; jQuery.each(country, function (i, val) { states.append('<option value="' + val + '">' + val + '</option>'); }); }); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select multiple="multiple" id="multiselect"></select> <select multiple="multiple" id="state"></select> See how it works: http://jsfiddle.net/6dnbgf24/1/
It is not possible to set multiple values with the same key, you must transfer the values to an array as follows:
var state = { "United States" : ["Alaska", "Alabama"] }; And then update your code accordingly:
$.each(state, function(key, val){ for( var i in val){ $("#state").append("<option value="+val[i]+">"+val[i]+"</option>"); } }); The above code has not been tested, may contain inconsistent brackets.
You can do it this way
<!DOCTYPE html> <head> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> var myJson = { "country": [ { "name": "United States", "id": "usa", "states": [ { "name": "State 1 USA", "id": "usaState1", "cid": "usa", "cities": [ { "name": "City 1", "id": "usaState1City1", "area": "12345 sqkm" }, { "name": "City 2", "id": "usaState1City2", "area": "12345 sqkm" } ] }, { "name": "State 2 USA", "id": "usaState2", "cid": "usa", "cities": [ { "name": "City 3", "id": "usaState2City3", "area": "12345 sqkm" }, { "name": "City 4", "id": "usaState2City4", "area": "12345 sqkm" } ] } ] }, { "name": "Australia", "id": "aus", "states": [ { "name": "State 1 Australia", "id": "ausState1", "cid": "aus", "cities": [ { "name": "City 5", "id": "ausState1City5", "area": "12345 sqkm" }, { "name": "City 6", "id": "ausState1City6", "area": "12345 sqkm" } ] }, { "name": "State 2 Australia", "id": "ausState2", "cid": "aus", "cities": [ { "name": "City 7", "id": "ausState2City7", "area": "12345 sqkm" }, { "name": "City 8", "id": "ausState2City8", "area": "12345 sqkm" } ] } ] } ] } $(document).ready(function(){ $.each(myJson.country, function (index, value) { //alert(value.name); $("#country").append('<option value="'+value.id+'">'+value.name+'</option>'); }); $("#country").click(function () { var countryId = $(this).val(); if(cntryId !=''){ $('#selectedvalue').val($(this).val()); }else{ $('#selectedvalue').val($(this).val()); } var cntryId =$('#selectedvalue').val(); var exist = cntryId.indexOf(','); if(parseInt(exist) > 0){ $("#state").html(''); var array = cntryId.split(","); $.each(array,function(i){ selectedId =array[i]; getState(selectedId); }); }else{ $("#state").html(''); getState(cntryId) } }); }); function getState(countryId){ $.each(myJson.country, function (index, value) { var state =value.states; $.each(state, function (indexState, valueState) { //alert(countryId+"=="+valueState.cid); if(countryId==valueState.cid){ $("#state").append('<option value="'+value.indexState+'">'+valueState.name+'</option>'); } }); }); } </script> <form id="dropdowns" action="index.html"> <label>Country:</label> <select id="country" name="country" multiple> <option value="000">-Select Country-</option> </select> <br /> <label>State:</label> <select id="state" name="network"> <option value="000">-Select State-</option> </select> <br /> <label>City:</label> <select id="model" name="model"> <option value="000">-Select City-</option> </select> <br /> <input type="hidden" id="selectedvalue" value=""> </form> </body> </html>