Question

我有一个带有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;
?>

Answer 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，我上面提到的问题可能会有所帮助。

如何在ajax响应后填充选项标记？

1 个答案: