创建两个依赖下拉列表答案

【问题标题】：Creating two dependent Dropdown List创建两个依赖下拉列表
【发布时间】：2015-01-04 09:54:07
【问题描述】：

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

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

【问题讨论】：

我可以使用文本文件从 txt 文件生成值

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

【解决方案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);
        });
   } 
});

【讨论】：

它在第三个下拉菜单中显示选项，但是我如何检查第三个下拉菜单的第一个/第二个下拉值？
@ekalostz 您的意思是第一个/第二个下拉值是否存在，例如在显示第三个选项之前进行一些验证。
是的，loadsubelement.php 中的脚本如何检查？

【解决方案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 的下拉框）时，此程序会触发。

【讨论】：