javascript - Fill data in options in select box using jquery -
i have json array data want fill value in select box option value ... array like
[ { "cityid": "42231", "countryid": "1", "regionid": "833", "city": "herat", "latitude": "34.333", "longitude": "62.2", "timezone": "+04:30", "dmaid": "0", "code": "hera" }, { "cityid": "5976", "countryid": "1", "regionid": "835", "city": "kabul", "latitude": "34.517", "longitude": "69.183", "timezone": "+04:50", "dmaid": "0", "code": "kabu" }, { "cityid": "42230", "countryid": "1", "regionid": "852", "city": "mazar-e sharif", "latitude": "36.7", "longitude": "67.1", "timezone": "+4:30", "dmaid": "0", "code": "msha" } ]
and want fill value in select box using jquery, how can this... have tried
$.each(json, function(i, value) { $('#cityselect').append($('<option>').text(value.cityid).attr('value.city', value.city)); });
can me this
var data = [{"cityid":"42231","countryid":"1","regionid":"833","city":"herat","latitude":"34.333","longitude":"62.2","timezone":"+04:30","dmaid":"0","code":"hera"},{"cityid":"5976","countryid":"1","regionid":"835","city":"kabul","latitude":"34.517","longitude":"69.183","timezone":"+04:50","dmaid":"0","code":"kabu"},{"cityid":"42230","countryid":"1","regionid":"852","city":"mazar-e sharif","latitude":"36.7","longitude":"67.1","timezone":"+4:30","dmaid":"0","code":"msha"}];
now populating options:
var $select = $('#cityselect'); $.each(data, function(i , value) { var option = $('<option value="'+ value.cityid+'">'+ value.city +'</option>'); $select.append(option); });
even more better in terms of performance:
var data = [{"cityid":"42231","countryid":"1","regionid":"833","city":"herat","latitude":"34.333","longitude":"62.2","timezone":"+04:30","dmaid":"0","code":"hera"},{"cityid":"5976","countryid":"1","regionid":"835","city":"kabul","latitude":"34.517","longitude":"69.183","timezone":"+04:50","dmaid":"0","code":"kabu"},{"cityid":"42230","countryid":"1","regionid":"852","city":"mazar-e sharif","latitude":"36.7","longitude":"67.1","timezone":"+4:30","dmaid":"0","code":"msha"}]; var $select = $('#cityselect'); options = []; $.each(data, function(i , value) { options.push('<option value="'+ value.cityid+'">'+ value.city +'</option>'); }); $select.html(options.join(""));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="cityselect"></select>
Comments
Post a Comment