创建两个依赖的下拉列表

时间:2015-01-04 09:54:07

标签: php jquery drop-down-menu mysqli mysqli-multi-query

我想根据第一个和第二个下拉列表中第二个下拉参考值的选择来填充第三个下拉列表。

的jQuery

<script type="text/javascript">
$(document).ready(function() {

$("#parent_cat").change(function() {
    $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
        $("#sub_cat").html(data);
    }); 
});

$("#sub_cat").change(function() {
    $.get('loadsubelement.php?sub_cat=' + $(this).val() + $('#parent_cat').val(), function(data) {
        $("#select_subelement").html(data);
    }); 
});
});
</script>

loadsubelement.php

<?php 
include('config.php');
$parent_cat = $_GET['parent_cat'];
$sub_cat = $_GET['sub_cat'];
$query = mysqli_query($connection, "SELECT * FROM maincategories WHERE categoryID = {$parent_cat}");
$query = mysqli_query($connection, "SELECT * FROM maincategories WHERE subcategoryID = {$sub_cat}");
echo '<option value="">Please select</option>';
while($row = mysqli_fetch_array($query)) {
echo '<option value="'.$row['subcategoryID'].'">' . $row['maincategory_name'] . "</option>";
}
?>

2 个答案:

答案 0 :(得分:0)

我认为你必须改变你的查询字符串:

$.get('loadsubelement.php?sub_cat=' + $(this).val() + 
                          "&parent_cat" + $('#parent_cat').val()

你在第二次ajax电话中错过了这个:"&parent_cat"


或者更好的方法是发送像这样的对象:

$("#sub_cat").change(function() {
   var dataString = { 
                 parent_cat : $('#parent_cat').val(),
                 sub_cat : $(this).val()
              };
   if($('#parent_cat').val() !== ""){ // check if value is selected or not i guessed default value as "".
        alert("Please choose the parent value.");
        $('#parent_cat').focus(); // apply focus on the element.
        return false;
   }else{
        $.get('loadsubelement.php', dataString, function(data) {
           $("#select_subelement").html(data);
        });
   } 
});

答案 1 :(得分:0)

jQuery(function($) {
jQuery("#office_id").change(function(){
var inputString=jQuery("#office_id").val();
$.post("?r=reports/summary/loademployees/", {office_id: ""+inputString+""}, function(data){
                    $('#employee_id').fadeIn();
                    $('#employee_id').html(data);
                }
            });
});
});

当您更改包含ID为 office_id 的办公室的下拉列表并加载该办公室的员工(另一个ID为 employee_id 的下拉框)时,会触发此程序。< / p>