如何在php中使用ajax响应文本动态创建select标签内的选项？

Question

我有这样的html代码用于下拉列表。

<select id="province" onchange="get_twn()">
<option value="western">Western</option>
<option value="southern">Southern</option>
</select>

<select id="towns" name="towns">
</select>

这是get_twn的ajax代码。

function get_twn(){

    var e = document.getElementById('province');    
    var val = e.options[e.selectedIndex].value;
    var xmlhttp;
    alert('i came');
        if (window.XMLHttpRequest)
          {
          xmlhttp=new XMLHttpRequest();
          }
        else
          {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }

        xmlhttp.onreadystatechange=function(){          
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                //window.location.assign("login.php");
                var val = xmlhttp.responseText; 
                var selectList = document.getElementById('towns');          
                var option = document.createElement('option');
                option.value = val;
                option.text = val;
                selectList.appendChild(option);

            }
      }
    xmlhttp.open("POST","test.php?a="+val,true);
    xmlhttp.send();
}

这是php代码test.php。

if(isset($_REQUEST["a"])){

        $result = $dba->get_twn($_REQUEST["a"]);
        while($row = mysql_fetch_array($result))
        {
            $val = $row['name'];
            echo $val;          
        }
}

此代码运行良好但没有错误。当此代码执行时，它将创建选项标记，但所有值相互组合并仅创建一个选项标记。就像这样。 但是看起来应该是这样的。

Answer 1

首先，将PHP更改为：

<强> test.php的：

if(isset($_REQUEST["a"])){

        $result = $dba->get_twn($_REQUEST["a"]);

        $towns = array();

        while($row = mysql_fetch_array($result))
        {
            $towns[] = $row['name'];    
        }

        echo json_encode($towns);
}

在你的函数get_twn中更改：

    xmlhttp.onreadystatechange=function(){          
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //window.location.assign("login.php");
            var selectList = document.getElementById('towns');    

            var jsonData = JSON.parse(val);

            for (var i in jsonData) {
              var option = document.createElement('option');
              option.value = jsonData[i];
              option.text = jsonData[i];
              selectList.appendChild(option);
            }

        }
    }

Answer 2

试试这个

if(isset($_REQUEST["a"])){

        $result = $dba->get_twn($_REQUEST["a"]);
        while($row = mysql_fetch_array($result))
        {
            echo "<option>".$row['name']."</option>";        
        }
}

在ajax中

if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                //window.location.assign("login.php");
                var val = xmlhttp.responseText; 
                var selectList = document.getElementById('towns');          
                selectList.appendChild(val);

            }