我有选择框的数组,根据我想要显示的选择框的数量,将输出多个选择框。我选择该选项时的功能是它使用ajax在我的数据库中搜索房间详细信息。搜索功能可以工作,但只能在第一个选择框中使用,而不能用于其余的选择框。 这是mypage.php
<select name = "room[]" id = "search">
<option value = "none">←Room</option>
<?php
$find_room = DB::getInstance()->query("SELECT * FROM tbl_room WHERE room_status = 'ENABLED'");
if($find_room->count()){
foreach($find_room->results() as $find_room){
?>
<option value = "<?php echo $find_room->room_id; ?>"><?php echo $find_room->room_number; ?>
</option>
<?php
}
}
?>
</select>
这是我的ajax
<script>
$(document).ready(function(){
$("#search").change(function(){
var search = $("#search").val();
$.ajax({
type:"POST",
url:"programhead_ajaxroom.php",
data:{search:search},
success:function(res){
$("#subjects").html(res);
}
});
});
});
</script>
这是我的ajaxpage
if(isset($_POST['search'])){
functions right here are select querys into table(this is working)
}
我非常感谢你的帮助。
答案 0 :(得分:0)
在动态更改HTML时,请尝试使用委托事件的语法。使用class属性定义change
事件,并在函数内使用this
,因为您有许多选择框。
$(document).on("change",".search",function(){
ele = $(this);
var search = ele.val();
$.ajax({
type:"POST",
url:"programhead_ajaxroom.php",
data:{search:search},
success:function(res){
ele.html(res);
}
});
});
此外,您必须在select html中使用class属性,因为ID应该是唯一的。
<select name = "room[]" id = "search" class="search">
答案 1 :(得分:0)
哦,我错过了循环遍历每个元素数组
$(document).on("change","select[name^=search]",function(){
check_obj = document.getElementsByName("search[]");
for (i=0; i<check_obj.length; i++)
{
if (check_obj[i].value == "none")
{}
else{
var search= check_obj[i].value;
}
}
$.ajax({
type:"POST",
url:"programhead_ajaxroom.php",
data:{search:search},
success:function(res){
$("#subjects").html(res);
}
});
});