php - 创建两个依赖下拉列表

Question

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

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>

加载子元素.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>";
}
?>

Answer 1

我认为您必须像这样更改查询字符串：

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

你错过了这个："&parent_cat"在你的第二个 ajax 调用中。

---

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

$("#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);
        });
   } 
});

Answer 2

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的下拉框）时，这是一个程序触发。