php:具有搜索功能的数组中的多个选择框

时间:2014-12-12 17:30:29

标签: php arrays ajax

我有选择框的数组,根据我想要显示的选择框的数量,将输出多个选择框。我选择该选项时的功能是它使用ajax在我的数据库中搜索房间详细信息。搜索功能可以工作,但只能在第一个选择框中使用,而不能用于其余的选择框。 这是mypage.php

<select name = "room[]" id = "search">
  <option value = "none">&larr;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)
}

我非常感谢你的帮助。

2 个答案:

答案 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);
            }

            });

    });