ajax响应后如何填充选项标签？答案

【问题标题】：How to populate option tag after ajax response?ajax响应后如何填充选项标签？
【发布时间】：2015-08-18 17:45:27
【问题描述】：

我有一个带有 2 个选择框和一个隐藏字段的表单。第一个选择框是主类别，第二个选择框是子类别。当第一个选择框中的值被选中时，第二个选择框中的值将从数据库中提取并相应显示。

我在第一个选择框上使用了 onchange 函数来触发 ajax 调用，它的响应将是来自数据库的值。但是，此值不会填充到 html 文件中。如何在 ajax 响应后在第二个选择框中填充这些值？因为当这些选项值被填充时，我可以用它来触发其他东西。但是，我卡在这个阶段，请帮助！

这是我的表格：

 <form>
 <select id='main-cat' name='maincat' onchange="sortSubcat(this.value)"/>
  <option value="">Please select one category</option>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
 </select>

 <div id='subcat-more'>
  <select id='subcat' name='subcat'>
    <option value=''>Please select a subcategory</option>
  </select>   
 </div>

<div id='morefield' style='display:none'>
   <input type='text' name='option1'/>
</div>
</form>

这里是ajax函数：

function sortSubcat(str)
{
if (str=="")
{
 document.getElementById("subcat").innerHTML="";
 return;
} 
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("subcat").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/member/sortsubcat.php?q="+str,true);
xmlhttp.send();
}

这是我的 php 文件：

<?php
require_once("../configs/dbconnect.php");
if (!empty($_GET['q'])){
$q = basename($_GET['q']);
$sql="SELECT * FROM subcat WHERE maincat=:q";
$result = $conn->prepare($sql);
$result->bindParam(':q', $q);
$result->execute();
echo "<option value=''>Please select a sub cat</option>";
foreach($result as $row)
{
echo "<option value='$row[name]'>$row[name]</option>";
}
}
else{
echo "<option value=''>Please select a subcat</option>";
}
$conn=null;
?>

【问题讨论】：

标签： ajax json

【解决方案1】：

如果没有在我的计算机上设置您的开发环境，这很难说。 javascript控制台中的任何错误？您是否检查过它是否到达您的document.getElementById("subcat").innerHTML=xmlhttp.responseText;？看看代码，好像是对的。

我建议使用 jQuery，因为它具有更好的浏览器兼容性和更优雅的方式来完成您的任务。

您当然会在 HTML 文件中的某个地方需要它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

您的 sortSubCat() 方法可能看起来有点像这样（未经测试）

function sortSubcat(str) {
  if (str == "") {
    $("#subcat").html("");
    return;
  }

  $.ajax({
    type: "GET",
    url: "/member/sortsubcat.php",
    data: "q=" + str,
    success: function(data) {
      $("#subcat").html(data);
    },
    error: function(XMLHttpRequest, status, error) {
      alert("Status: " + status);
      alert("Error: " + error); 
    }
  })
}

如果你不会使用 jQuery，我上面提出的问题可能会有所帮助。

【讨论】：