javascript - HTML DOM form select option dropdown -
i have javascript code country list.
var country_list = [ {"country_code": "ad", "country_name": "andorra"}, {"country_code": "ae", "country_name": "united arab emirates"}, {"country_code": "af", "country_name": "afghanistan"}, {"country_code": "ag", "country_name": "antigua , barbuda"}, {"country_code": "ai", "country_name": "anguilla"}, {"country_code": "al", "country_name": "albania"}, {"country_code": "am", "country_name": "armenia"}, {"country_code": "an", "country_name": "netherlands antilles"}, {"country_code": "ao", "country_name": "angola"}, {"country_code": "aq", "country_name": "antarctica"}, {"country_code": "ar", "country_name": "argentina"}, {"country_code": "as", "country_name": "american samoa"}, {"country_code": "at", "country_name": "austria"}, {"country_code": "au", "country_name": "australia"}, {"country_code": "aw", "country_name": "aruba"}, {"country_code": "az", "country_name": "azerbaijan"}, {"country_code": "ba", "country_name": "bosnia , herzegovina"}, {"country_code": "bb", "country_name": "barbados"}, {"country_code": "bd", "country_name": "bangladesh"}, {"country_code": "be", "country_name": "belgium"}, {"country_code": "bf", "country_name": "burkina faso"}, {"country_code": "bg", "country_name": "bulgaria"}, {"country_code": "bh", "country_name": "bahrain"}, {"country_code": "bi", "country_name": "burundi"}, {"country_code": "bj", "country_name": "benin"}, {"country_code": "bm", "country_name": "bermuda"}, {"country_code": "bn", "country_name": "brunei darussalam"}, {"country_code": "bo", "country_name": "bolivia"}, {"country_code": "br", "country_name": "brazil"}, {"country_code": "bs", "country_name": "bahamas"}, {"country_code": "bt", "country_name": "bhutan"}, {"country_code": "bv", "country_name": "bouvet island"}, {"country_code": "bw", "country_name": "botswana"}, {"country_code": "by", "country_name": "belarus"}, {"country_code": "bz", "country_name": "belize"}, {"country_code": "ca", "country_name": "canada"}, {"country_code": "cc", "country_name": "cocos (keeling) islands"}, {"country_code": "cf", "country_name": "central african republic"}, {"country_code": "cg", "country_name": "congo"}, {"country_code": "ch", "country_name": "switzerland"}, {"country_code": "ci", "country_name": "cote d'ivoire (ivory coast)"}, {"country_code": "ck", "country_name": "cook islands"}, {"country_code": "cl", "country_name": "chile"}, {"country_code": "cm", "country_name": "cameroon"}, {"country_code": "cn", "country_name": "china"}, {"country_code": "co", "country_name": "colombia"}, {"country_code": "cr", "country_name": "costa rica"}, {"country_code": "cs", "country_name": "czechoslovakia (former)"}, {"country_code": "cu", "country_name": "cuba"}, {"country_code": "cv", "country_name": "cape verde"}, {"country_code": "cx", "country_name": "christmas island"}, {"country_code": "cy", "country_name": "cyprus"}, {"country_code": "cz", "country_name": "czech republic"}, {"country_code": "de", "country_name": "germany"}, {"country_code": "dj", "country_name": "djibouti"}, {"country_code": "dk", "country_name": "denmark"}, {"country_code": "dm", "country_name": "dominica"}, {"country_code": "do", "country_name": "dominican republic"}, {"country_code": "dz", "country_name": "algeria"}, {"country_code": "ec", "country_name": "ecuador"}, {"country_code": "ee", "country_name": "estonia"}, {"country_code": "eg", "country_name": "egypt"}, {"country_code": "eh", "country_name": "western sahara"}, {"country_code": "er", "country_name": "eritrea"}, {"country_code": "es", "country_name": "spain"}, {"country_code": "et", "country_name": "ethiopia"}, {"country_code": "fi", "country_name": "finland"}, {"country_code": "fj", "country_name": "fiji"}, {"country_code": "fk", "country_name": "falkland islands (malvinas)"}, {"country_code": "fm", "country_name": "micronesia"}, {"country_code": "fo", "country_name": "faroe islands"}, {"country_code": "fr", "country_name": "france"}, {"country_code": "fx", "country_name": "france, metropolitan"}, {"country_code": "ga", "country_name": "gabon"}, {"country_code": "gb", "country_name": "great britain (uk)"}, {"country_code": "gd", "country_name": "grenada"}, {"country_code": "ge", "country_name": "georgia"}, {"country_code": "gf", "country_name": "french guiana"}, {"country_code": "gh", "country_name": "ghana"}, {"country_code": "gi", "country_name": "gibraltar"}, {"country_code": "gl", "country_name": "greenland"}, {"country_code": "gm", "country_name": "gambia"}, {"country_code": "gn", "country_name": "guinea"}, {"country_code": "gp", "country_name": "guadeloupe"}, {"country_code": "gq", "country_name": "equatorial guinea"}, {"country_code": "gr", "country_name": "greece"}, {"country_code": "gs", "country_name": "s. georgia , s. sandwich isls."}, {"country_code": "gt", "country_name": "guatemala"}, {"country_code": "gu", "country_name": "guam"}, {"country_code": "gw", "country_name": "guinea-bissau"}, {"country_code": "gy", "country_name": "guyana"}, {"country_code": "hk", "country_name": "hong kong"}, {"country_code": "hm", "country_name": "heard , mcdonald islands"}, {"country_code": "hn", "country_name": "honduras"}, {"country_code": "hr", "country_name": "croatia (hrvatska)"}, {"country_code": "ht", "country_name": "haiti"}, {"country_code": "hu", "country_name": "hungary"}, {"country_code": "id", "country_name": "indonesia"}, {"country_code": "ie", "country_name": "ireland"}, {"country_code": "il", "country_name": "israel"}, {"country_code": "in", "country_name": "india"}, {"country_code": "io", "country_name": "british indian ocean territory"}, {"country_code": "iq", "country_name": "iraq"}, {"country_code": "ir", "country_name": "iran"}, {"country_code": "is", "country_name": "iceland"}, {"country_code": "it", "country_name": "italy"}, {"country_code": "jm", "country_name": "jamaica"}, {"country_code": "jo", "country_name": "jordan"}, {"country_code": "jp", "country_name": "japan"}, {"country_code": "ke", "country_name": "kenya"}, {"country_code": "kg", "country_name": "kyrgyzstan"}, {"country_code": "kh", "country_name": "cambodia"}, {"country_code": "ki", "country_name": "kiribati"}, {"country_code": "km", "country_name": "comoros"}, {"country_code": "kn", "country_name": "saint kitts , nevis"}, {"country_code": "kp", "country_name": "korea (north)"}, {"country_code": "kr", "country_name": "korea (south)"}, {"country_code": "kw", "country_name": "kuwait"}, {"country_code": "ky", "country_name": "cayman islands"}, {"country_code": "kz", "country_name": "kazakhstan"}, {"country_code": "la", "country_name": "laos"}, {"country_code": "lb", "country_name": "lebanon"}, {"country_code": "lc", "country_name": "saint lucia"}, {"country_code": "li", "country_name": "liechtenstein"}, {"country_code": "lk", "country_name": "sri lanka"}, {"country_code": "lr", "country_name": "liberia"}, {"country_code": "ls", "country_name": "lesotho"}, {"country_code": "lt", "country_name": "lithuania"}, {"country_code": "lu", "country_name": "luxembourg"}, {"country_code": "lv", "country_name": "latvia"}, {"country_code": "ly", "country_name": "libya"}, {"country_code": "ma", "country_name": "morocco"}, {"country_code": "mc", "country_name": "monaco"}, {"country_code": "md", "country_name": "moldova"}, {"country_code": "mg", "country_name": "madagascar"}, {"country_code": "mh", "country_name": "marshall islands"}, {"country_code": "mk", "country_name": "macedonia"}, {"country_code": "ml", "country_name": "mali"}, {"country_code": "mm", "country_name": "myanmar"}, {"country_code": "mn", "country_name": "mongolia"}, {"country_code": "mo", "country_name": "macau"}, {"country_code": "mp", "country_name": "northern mariana islands"}, {"country_code": "mq", "country_name": "martinique"}, {"country_code": "mr", "country_name": "mauritania"}, {"country_code": "ms", "country_name": "montserrat"}, {"country_code": "mt", "country_name": "malta"}, {"country_code": "mu", "country_name": "mauritius"}, {"country_code": "mv", "country_name": "maldives"}, {"country_code": "mw", "country_name": "malawi"}, {"country_code": "mx", "country_name": "mexico"}, {"country_code": "my", "country_name": "malaysia"}, {"country_code": "mz", "country_name": "mozambique"}, {"country_code": "na", "country_name": "namibia"}, {"country_code": "nc", "country_name": "new caledonia"}, {"country_code": "ne", "country_name": "niger"}, {"country_code": "nf", "country_name": "norfolk island"}, {"country_code": "ng", "country_name": "nigeria"}, {"country_code": "ni", "country_name": "nicaragua"}, {"country_code": "nl", "country_name": "netherlands"}, {"country_code": "no", "country_name": "norway"}, {"country_code": "np", "country_name": "nepal"}, {"country_code": "nr", "country_name": "nauru"}, {"country_code": "nt", "country_name": "neutral zone"}, {"country_code": "nu", "country_name": "niue"}, {"country_code": "nz", "country_name": "new zealand (aotearoa)"}, {"country_code": "om", "country_name": "oman"}, {"country_code": "pa", "country_name": "panama"}, {"country_code": "pe", "country_name": "peru"}, {"country_code": "pf", "country_name": "french polynesia"}, {"country_code": "pg", "country_name": "papua new guinea"}, {"country_code": "ph", "country_name": "philippines"}, {"country_code": "pk", "country_name": "pakistan"}, {"country_code": "pl", "country_name": "poland"}, {"country_code": "pm", "country_name": "st. pierre , miquelon"}, {"country_code": "pn", "country_name": "pitcairn"}, {"country_code": "pr", "country_name": "puerto rico"}, {"country_code": "pt", "country_name": "portugal"}, {"country_code": "pw", "country_name": "palau"}, {"country_code": "py", "country_name": "paraguay"}, {"country_code": "qa", "country_name": "qatar"}, {"country_code": "re", "country_name": "reunion"}, {"country_code": "ro", "country_name": "romania"}, {"country_code": "ru", "country_name": "russia"}, {"country_code": "rw", "country_name": "rwanda"}, {"country_code": "sa", "country_name": "saudi arabia"}, {"country_code": "sb", "country_name": "solomon islands"}, {"country_code": "sc", "country_name": "seychelles"}, {"country_code": "sd", "country_name": "sudan"}, {"country_code": "se", "country_name": "sweden"}, {"country_code": "sg", "country_name": "singapore"}, {"country_code": "sh", "country_name": "st. helena"}, {"country_code": "si", "country_name": "slovenia"}, {"country_code": "sj", "country_name": "svalbard , jan mayen islands"}, {"country_code": "sk", "country_name": "slovak republic"}, {"country_code": "sl", "country_name": "sierra leone"}, {"country_code": "sm", "country_name": "san marino"}, {"country_code": "sn", "country_name": "senegal"}, {"country_code": "so", "country_name": "somalia"}, {"country_code": "sr", "country_name": "suriname"}, {"country_code": "st", "country_name": "sao tome , principe"}, {"country_code": "su", "country_name": "ussr (former)"}, {"country_code": "sv", "country_name": "el salvador"}, {"country_code": "sy", "country_name": "syria"}, {"country_code": "sz", "country_name": "swaziland"}, {"country_code": "tc", "country_name": "turks , caicos islands"}, {"country_code": "td", "country_name": "chad"}, {"country_code": "tf", "country_name": "french southern territories"}, {"country_code": "tg", "country_name": "togo"}, {"country_code": "th", "country_name": "thailand"}, {"country_code": "tj", "country_name": "tajikistan"}, {"country_code": "tk", "country_name": "tokelau"}, {"country_code": "tm", "country_name": "turkmenistan"}, {"country_code": "tn", "country_name": "tunisia"}, {"country_code": "to", "country_name": "tonga"}, {"country_code": "tp", "country_name": "east timor"}, {"country_code": "tr", "country_name": "turkey"}, {"country_code": "tt", "country_name": "trinidad , tobago"}, {"country_code": "tv", "country_name": "tuvalu"}, {"country_code": "tw", "country_name": "taiwan"}, {"country_code": "tz", "country_name": "tanzania"}, {"country_code": "ua", "country_name": "ukraine"}, {"country_code": "ug", "country_name": "uganda"}, {"country_code": "uk", "country_name": "united kingdom"}, {"country_code": "um", "country_name": "us minor outlying islands"}, {"country_code": "us", "country_name": "united states"}, {"country_code": "uy", "country_name": "uruguay"}, {"country_code": "uz", "country_name": "uzbekistan"}, {"country_code": "va", "country_name": "vatican city state (holy see)"}, {"country_code": "vc", "country_name": "saint vincent , grenadines"}, {"country_code": "ve", "country_name": "venezuela"}, {"country_code": "vg", "country_name": "virgin islands (british)"}, {"country_code": "vi", "country_name": "virgin islands (u.s.)"}, {"country_code": "vn", "country_name": "viet nam"}, {"country_code": "vu", "country_name": "vanuatu"}, {"country_code": "wf", "country_name": "wallis , futuna islands"}, {"country_code": "ws", "country_name": "samoa"}, {"country_code": "ye", "country_name": "yemen"}, {"country_code": "yt", "country_name": "mayotte"}, {"country_code": "yu", "country_name": "yugoslavia"}, {"country_code": "za", "country_name": "south africa"}, {"country_code": "zm", "country_name": "zambia"}, {"country_code": "zr", "country_name": "zaire"}, {"country_code": "zw", "country_name": "zimbabwe"} ]; im trying make country field select , option dropdown, name of countries full names , value sent server 2 letter abbreviation. country united states needs selected default.
this tried isn't working
var select = document.getelementbyid("country"); var options = country_list; for(var = 0; < options.length; i++) { var opt = options[i]; var el = document.createelement("option"); el.textcontent = opt; el.value = opt; select.appendchild(el); }
a couple of problems there:
you've used
opt, object, both name , value.rather using
textcontent, simplest way add options select boxoptionconstructorthere's no need @ use new variable,
options, refer array have existing variable,country_list, referring to.
so:
var selectoptions = document.getelementbyid("country").options; for(var = 0; < country_list.length; i++) { var opt = country_list[i]; selectoptions.add(new option( opt.country_name, opt.country_code )); } live example:
var country_list = [{ "country_code": "ad", "country_name": "andorra" }, { "country_code": "ae", "country_name": "united arab emirates" }, { "country_code": "af", "country_name": "afghanistan" }, { "country_code": "ag", "country_name": "antigua , barbuda" }, { "country_code": "ai", "country_name": "anguilla" }, { "country_code": "al", "country_name": "albania" }, { "country_code": "am", "country_name": "armenia" }, { "country_code": "an", "country_name": "netherlands antilles" }, { "country_code": "ao", "country_name": "angola" }, { "country_code": "aq", "country_name": "antarctica" }, { "country_code": "ar", "country_name": "argentina" }, { "country_code": "as", "country_name": "american samoa" }, { "country_code": "at", "country_name": "austria" }/*...and on...*/]; var selectoptions = document.getelementbyid("country").options; (var = 0; < country_list.length; i++) { var opt = country_list[i]; selectoptions.add(new option( opt.country_name, opt.country_code )); }<select id="country"></select>or (if you're working in es5 environment or applying shim array#foreach):
var selectoptions = document.getelementbyid("country").options; country_list.foreach(function(e) { selectoptions.add(new option( e.country_name, e.country_code )); }); live example:
var country_list = [{ "country_code": "ad", "country_name": "andorra" }, { "country_code": "ae", "country_name": "united arab emirates" }, { "country_code": "af", "country_name": "afghanistan" }, { "country_code": "ag", "country_name": "antigua , barbuda" }, { "country_code": "ai", "country_name": "anguilla" }, { "country_code": "al", "country_name": "albania" }, { "country_code": "am", "country_name": "armenia" }, { "country_code": "an", "country_name": "netherlands antilles" }, { "country_code": "ao", "country_name": "angola" }, { "country_code": "aq", "country_name": "antarctica" }, { "country_code": "ar", "country_name": "argentina" }, { "country_code": "as", "country_name": "american samoa" }, { "country_code": "at", "country_name": "austria" }/*...and on...*/]; var selectoptions = document.getelementbyid("country").options; country_list.foreach(function(e) { selectoptions.add(new option( e.country_name, e.country_code )); });<select id="country"></select>
Comments
Post a Comment