javascript - Building dropdown list from JSON, getting blank option items -


i'm getting blank options in dropdown list while creating 2 select input json object. code 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/

your issue because html generate invalid. you're adding closing option elements <option /> when should </option> renderer adding new blank option element it's not sure you're trying do.

for example, this:

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

should be:

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

if fix html close </option> properly, code works.

update fiddle


Comments

Post a Comment

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more