Question

我有这个表单，其中有一个选择字段用于主类别，一个选择字段用于子类别和隐藏字段。仅当从子类别中选择特定值时，才会显示此隐藏字段。

此子类别选项是来自main-category的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>

我有一个处理此表单验证的Jquery代码，它会告诉是否显示#morefield。以下是此代码的一部分：

$("#subcat").change(function(){
    if (subcat.val() == 'sub-cat-one'){ 
        $("#morefield").css("display","block"); 
    }else{
        $("#morefield").hide();
    }
});

不幸的是，Ajax响应只在屏幕上显示选项，但是它没有在html中更改，因此当我查看源代码时，我看不到子猫的任何选项。多数民众赞成为什么即使我选择了选择子猫一，我会显示div #morefield。

无论如何都有解决这个问题的方法吗？

最诚挚的问候，

更多信息：

这是我的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

你必须使用

if ($(this).val() == 'sub-cat-one'){

而不是

if (subcat.val() == 'sub-cat-one'){

访问#subcat事件处理程序中的正确html元素（onchange）。

您也不应将id subcat用于多个元素。目前，div和select的ID为subcat。

Answer 2

您有两个具有相同ID subcat的元素（div和select）。 id属性对于所有元素都应该是唯一的。

Answer 3

我认为你应该尝试以下建议：

使用 AJAX成功回调，而不是使用onchange。
if let json = try? NSJSONSerialization.JSONObjectWithData(urlData!, options: []) as? [String:AnyObject] { if let objects = json?["objects"] as? [[String:AnyObject]] { for dict in objects { if let title = dict["title"] as? String { print(title) } } } }

Answer 4

我想我会看到你的问题来自哪里，在你回复结果的每次迭代中。只有那个结果才会返回到你的ajax脚本。在你的php文件中执行此操作：

$returned_string = '[';

foreach($result as $row)
{
   $returned_string .= '{"name" : "'. $row[name]. '", "value" : "'. $row[name]. '"},';
}
$returned_string = substr($returned_string, 0, -1); //remove trailing ','
$returned_string .= ']';

header("Content-type: application/json");
echo $returned_string;
exit;

然后在你的successCallback函数中：

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
      var response = JSON.parse(xmlhttp.responseText);
      var selectElement = document.getElementById('subcat');
      for(var i = 0; i < response.length; i++)
      {
         var idx = i+1;
         selectElement.options[idx] = new Option(response[idx].value, response[idx].name, false, false);
      }
    }
  }
}

如何在ajax响应后显示表单中的隐藏字段

4 个答案: