创建两个相关的下拉列表

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>

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>";
}
?>

Answer 1

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

$.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);
        });
   } 
});

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) 那个办公室。

创建两个相关的下拉列表

Creating two dependent Dropdown List

php

jquery

mysqli

mysqli-multi-query

drop-down-menu