在 javascript 中使用 jquery 和 json 填充国家和州答案

【问题标题】：Popluating country and state using jquery and json in javascript在 javascript 中使用 jquery 和 json 填充国家和州
【发布时间】：2013-09-16 07:45:34
【问题描述】：

您好，我正在尝试使用 jquery 在下拉列表中填充国家和州下拉列表。

我的 json 看起来像这样

块引用

var myjson = [{"countryName":"Afghanistan","countryCode":"AF"},{"countryName":"United States","countryCode":"US" ,"state":["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},
{"countryName":"United States Minor Outlying Islands","countryCode":"UM"},
{"countryName":"Uruguay","countryCode":"UY","state":["abc","edf"]}];

我的html

<body>
<select id = "country" name = "country" onchange= "getvalue()"></select>
<select id = "state" name = "state" onchage="getstate()"></select>
</body>

我的 javascript

<script>
function getvalue(){

 var country = document.getElementById("country").value;
 var divtemp = document.getElementById("test");
  for (var i = 0; i < myjson.length; i++ ) {


  if(myjson[i].state != null )
  {
  if(myjson[i].state.length==0){
  $("#state").empty();
    }        
  else
  {
    for(var j = 0 ; j< myjson[i].state.length;j++)
    {

        if(country === myjson[i].countryName)
        {
        //alert(country);
        //alert(myjson[i].countryName);
        //divtemp.innerHTML= myjson[i].state[j] + "<br>"+divtemp.innerHTML;
        $("#state").append(

            $("<option></option>")

                .text(myjson[i].state[j])

        );
        }
    }

  }
 }
 }
 </script>

此脚本函数正在填充州，但是当我选择另一个国家/地区时，州会附加到较早的州列表中。我无法确定我的病情所需的更改。我不想使用 Ajax 来执行此操作。

【问题讨论】：

标签： javascript jquery json

【解决方案1】：

试试这个。在头脑中这样做......

<script>
$(document).ready(
  //when the document is loaded, initialize my selectors
  function initCountries(){
     //put all countries into the country selector
     for (cix in myjson){
       var options='<option value="'+cix+'">'+myjson[cix].countryName+'</option>';
       $("#country").append(options);
  }
  //listen for the change event when the user chooses a country
  $("#country").change(function fillStates(){
    //find the country the user chose, then fill the states selector
    var cix=$(this).val();
    var states=myjson[cix].state;
    $("#state").empty();
    for (six in states){
        var options='<option value="'+states[six]+'">'+states[six]+'</option>';
        $("#state").append(options);
    }
  });
  //listen for the change event when the user chooses a state
  $("#state").change(function stateSelected(){
    //show the state the user chose
    var six=$(this).val();
    alert(six);
  });

});
</script>

然后在你的身体里像这样改变选择器...

<select id = "country"></select>
<select id = "state"></select>

【讨论】：

【解决方案2】：

更改国家/地区时清除状态组合框..

document.getElementById('state').innerHTML = "";

【讨论】：