JS运行时出错,提示appendChild为空

 <body>
    <h1>省市联动</h1>
    <h3 id="h3"></h3>
    <select name="province" id="p">
        <option>===请选择省份===</option>
    </select>
    <select name="city" id="c">
        <option>===请选择市===</option>
    </select>
</body>
<script type="text/javascript" src="<c:url value='//ajax-lib/ajaxutils.js'/>"></script>
<script type="text/javascript">
      window.onload = function(){
          var xmlHttp = createXMLHttpRequest();
          xmlHttp.open("GET","<c:url value='/ProvinceServlet'/>",true);
        xmlHttp.send(null);
        xmlHttp.onreadystatechange = function(){
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var text = xmlHttp.responseText;
                var proArray = eval("("+text+")");
                for(var i=0;i<proArray.length;i++){
                    var pro = proArray[i];
                    var option = document.createElement("option");
                    option.value = pro.pid;
                    var node = document.createTextNode(pro.name);


                    option.appendChild(node);
                    //document.write(option.text);
                    document.getElementById("p").appendChild(option);
                }
            }else {
                document.write("!");
            }
        };
      };

  </script>

没有问题,直接模拟你的数据

 <body>
    <h1>省市联动</h1>
    <h3 id="h3"></h3>
    <select name="province" id="p">
        <option>===请选择省份===</option>
    </select>
    <select name="city" id="c">
        <option>===请选择市===</option>
    </select>
</body>
<script type="text/javascript">
    //window.onload = function () {
       // var xmlHttp = createXMLHttpRequest();
       // xmlHttp.open("GET", "<c:url value='/ProvinceServlet'/>", true);
       // xmlHttp.send(null);
      //  xmlHttp.onreadystatechange = function () {
         //   if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var text ='[{name:"name1",id:"id1"}]'// xmlHttp.responseText;
                var proArray = eval("(" + text + ")");
                for (var i = 0; i < proArray.length; i++) {
                    var pro = proArray[i];
                    var option = document.createElement("option");
                    option.value = pro.pid;
                    var node = document.createTextNode(pro.name);


                    option.appendChild(node);
                    //document.write(option.text);
                    document.getElementById("p").appendChild(option);
                }
            //} else {
           //     document.write("!");
          //  }
       // };
    //};

</script>

图片说明

  var proArray = eval("(" + text + ")");

这一行出错了吧,个人觉得应该这样将字符串转成对象。

var proArray = eval('var data='+ text);

以后就可以使用data这个变量来更新你的界面了。