javascript - 如何解决选中国家时动态显示状态的问题？

Question

对于我正在从事的项目，当用户选择其家庭成员的出生国家/地区时，我需要动态检索特定国家/地区的州。我正在使用 AJAX 来实现这一点。

我只能提及 7 位家庭成员的详细信息，因此我的表格中有 7 个下拉菜单，用于显示家庭成员所在的国家/地区。

每当用户选择特定国家/地区时，都会调用 javascript 函数 showState(它存在于单独的 .js 文件中)。该函数有2个参数-一个是一个整数(位)，它指定所选国家的字段位置(即是否是国家编号1、2、3等最多7个，以便在状态字段中显示相应的状态- 状态 1、状态 2、状态 3 ....)。第二个是从表单传递的国家名称。

此函数调用一个 Controller ，在该 Controller 中检索所选国家/地区的状态。现在这些状态必须显示在表单中。但是状态没有出现。

我的代码是:

var stateArr=["state1","state2","state3","state4","state5","state6","state7"];
function showState(place,str){
   -------
    var url="State1Controller";
    url +="?Country1=" +str +"&state=" +stateArr[place-1];
         xmlHttp.onreadystatechange = stateChange1;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
}

function stateChange1(){   

    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){  
        document.getElementById(stateArr[place]).innerHTML=xmlHttp.responseText       
      }    
}

当我在 document.getElementByID 中硬编码 state1 时，我得到了想要的结果，但不是。请帮忙。

Answer 1

那是因为变量 place 在函数 stateChange1 的范围内未定义

试试这个。

var stateArr = ["state1", "state2", "state3", "state4", "state5", "state6", "state7"];
var p;

function showState(place, str) {
    //-------
    p = place;
    var url = "State1Controller";
    url += "?Country1=" + str + "&state=" + stateArr[p - 1];
    xmlHttp.onreadystatechange = stateChange1;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function stateChange1() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        // shouldn't we use 'p -1' instead of 'p' here also?
        document.getElementById(stateArr[p]).innerHTML = xmlHttp.responseText
    }
}