Jani Jani - 25 days ago 12
Javascript Question

Building dropdown list from JSON, getting blank option items

I'm getting blank options in the dropdown list while creating 2 select input from a JSON object. My code is as below:

<form>
<div class="form-group">
<label for="countries">Countries: </label>
<select class="select2" id="countries" name="countries" multiple="multiple" style="width: 50%">
<option></option>
</select>
</div>
<div class="form-group">
<label for="cities">Cities: </label>
<select class="select2" id="cities" name="cities" multiple="multiple" style="width: 50%">
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>


var selectData = [{
"id": "1",
"name": "United States",
"city": [{
"country_id": "1",
"id": "1",
"name": "New York City"
}, {
"country_id": "1",
"id": "2",
"name": "Los Angeles"
}, {
"country_id": "1",
"id": "3",
"name": "Chicago"
}, {
"country_id": "1",
"id": "4",
"name": "Hustan"
}]
}, {
"id": "2",
"name": "India",
"city": [{
"country_id": "2",
"id": "5",
"name": "Mumbai"
}, {
"country_id": "2",
"id": "6",
"name": "Delhi"
}, {
"country_id": "2",
"id": "7",
"name": "Bangalore"
}, {
"country_id": "2",
"id": "8",
"name": "Chennai"
}]
}, {
"id": "3",
"name": "China",
"city": [{
"country_id": "3",
"id": "9",
"name": "Guangzhou"
}, {
"country_id": "3",
"id": "10",
"name": "Shanghai"
}, {
"country_id": "3",
"id": "11",
"name": "Chongqing"
}, {
"country_id": "3",
"id": "12",
"name": "Beijing"
}]
}];

$("document").ready(function() {
function getCountryId() {
return $("#countries").val();
}

var $select1 = $("#countries"),
$select2 = $("#cities");

var countries = '<option value="0">All<option/>';
$.each(selectData, function(i, country) {
countries += '<option value="' + country.id + '">' + country.name + '<option/>';
});
$select1.html(countries);

function createCities(id = null) {
if (!id || id == 0) {
var cities = '<option value="0">All<option/>';
$.each(selectData, function(i, country) {
$.each(country.city, function(i, city) {
cities += '<option value="' + city.id + '">' + city.name + '<option/>';
});
});
$select2.html(cities);
} else {
var cities = '<option value="0">All<option/>';
if ($.isArray(id)) {
$.each(id, function(i, id) {
$.each(selectData, function(i, country) {
if (country.id === id) {
$.each(country.city, function(i, city) {
cities += '<option value="' + city.id + '">' + city.name + '<option/>';
});
}
});
})
} else {
$.each(selectData, function(i, country) {
if (country.id === id) {
$.each(country.city, function(i, city) {
cities += '<option value="' + city.id + '">' + city.name + '<option/>';
});
}
});
}
$select2.html(cities);
}
}

createCities();

$select1.on('change', function() {
var id = getCountryId();
createCities(id);
});

$(".select2").select2();
});


Code demo:
https://jsfiddle.net/vee4c1op/

Answer

Your issue is because the HTML you generate is invalid. You're adding closing option elements with <option /> when it should be </option> The renderer is then adding a new blank option element as it's not sure what you're trying to do.

For example, this:

var countries = '<option value="0">All<option/>'; 

Should be:

var countries = '<option value="0">All</option>';

If you fix your HTML to close the </option> properly, then your code works.

Update fiddle

Comments