Question

我有一个包含2个下拉列表+ 1个隐藏字段的表单。

第一个下拉列表是城市。

第二个下拉列表是基于上述选定城市的区域值。

隐藏字段将根据特定区域值使用Jquery显示或关闭。

我的问题是：

在城市下拉列表中，我有onchange ajax函数，它有助于在区域下拉列表中生成值。但是，选择特定区域值时，隐藏字段将不会显示。

这是我的html表单：

<form>
<select id='main-cat' name='maincat' onchange="sortSubcat(this.value)"/>
<option value="">Please select one category</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
</select>
<select id='subcat' name='subcat'>
<option value=''>Please select a district</option>
</select>   
<div id='morefield' style='display:none'>
 <input type='text' name='option1'/>
</div>
</form>

这是onchange 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();
}

如果选择了特定的disctrict值，以下是Jquery代码中触发隐藏字段的部分：

$("#subcat").change(function(){
if ($(this).val() == 'district a'){ 
    $("#morefield").css("display","block"); 
}else{
    $("#morefield").hide();
}
});

这是我的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 district</option>";

 foreach($result as $row)
 {
    echo "<option value='$row[name]'>$row[name]</option>";  
 }
 }
 else{
 echo "<option value=''>Please select a district</option>";
 }
 $conn=null;
 ?>

Answer 1

尝试以下行

第application.html.erb行后

console.log($(this).val());

现在找到更改从控制台中的ajax加载的下拉列表所获得的值。

如何从ajax响应中填充下拉列表？

1 个答案: