如何在php中使用ajax響應文本動態地在選擇標籤內部創建選項？

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> 

這是我的ajax代碼get_twn。

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); 

      }