如何在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>";        
        }
}

在阿贾克斯

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

            }