MySQL中的多个嵌套下拉菜单 - Multiple nested dropdown menu from MySQL

我有下面的php页面，其中有四个下拉列表，正确地填充了四个不同的mysql查询。我会根据CATEGORIES_1.c_id通过查询填充Categories_2，并为其他下拉列表嵌套相同的查询。

尝试调用myFunction() onChange，但似乎不起作用。我没有收到警报。

有人知道我是怎么做到的吗？任何帮助都将不胜感激。

我知道我必须使用mysqli，但这是一个现有的页面，我稍后会使用。

<script>
var myDropdown=document.getElementsByName('cat1')[0];
function myFunction(){
    alert('option changed : '+myDropdown.value);
}
</script>

<form enctype="multipart/form-data" method="post" action="import.php">
        <label for="cat_name">Categories_1</label>
        <select name = "cat1" onChange="myFunction()">
        <?php
            $s = mysql_query("SELECT * FROM `CATEGORIES_1`");
            while($row = mysql_fetch_assoc($s)) {
            echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>'); } ?>
        </select>
        <br>            
        <label for="cat_nam">Categories_2</label>
        <select>
        <?php
            $s = mysql_query("SELECT c_name FROM `CATEGORIES_2`");
            while($row = mysql_fetch_assoc($s)) {
            echo ('<option value="0">' . $row['c_name'] . '</option>'); }            ?>
        </select>
        <br>            
        <label for="cat_nae">Categories_3</label>
        <select>
        <?php
            $s = mysql_query("SELECT c_name FROM `CATEGORIES_3`");
            while($row = mysql_fetch_assoc($s)) {
            echo ('<option value="0">' . $row['c_name'] . '</option>'); } ?>
        </select>
        <br>            
        <label for="cat_ame">Categories_4</label>
        <select>
        <?php
            $s = mysql_query("SELECT c_name FROM `CATEGORIES_4`");
            while($row = mysql_fetch_assoc($s)) {
            echo ('<option value="0">' . $row['c_name'] . '</option>'); }            ?>
        </select>

为此需要使用ajax。。我希望这能有所帮助。。

$(document).ready(function(){
    $(document).on('change','#cat1',function(){
        $.ajax({
            cache: false,
            url: 'getSecondSelect.php',
            type: 'post',
            data: 'input=' + $(this).val(),
            success: function(data){
                $('#cat2').html(data)
            }
        })
    })
}

FORM

<form enctype="multipart/form-data" method="post" action="import.php">
    <label for="cat_name">Categories_1</label>
    <select id="cat1" name="cat1">
    <?php
        $s = mysql_query("SELECT * FROM `CATEGORIES_1`");
        while($row = mysql_fetch_assoc($s)) {
        echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>'); }
    ?>
    </select>
    <br />
    <label for="cat_name">Categories_2</label>
    <select id="cat2" name="cat2"></select>
    <br />

getSecondSelect.php

$s = mysql_query("SELECT c_name FROM `CATEGORIES_2` WHERE CATEGORIES_1.c_id='".$_POST['input']."'");
while($row = mysql_fetch_assoc($s)) {
echo ('<option value="0">' . $row['c_name'] . '</option>'); }

这是调用dropdoen值的错误方法

var myDropdown=document.getElementsByName('cat1')[0];

您的myFunction将是

<script>
function myFunction(){
var myDropdown=document.getElementById('cat1');
  var myDropdowval= myDropdown[myDropdown.selectedIndex].value;
   alert(myDropdowval);
}
</script>

在这里，您将id id="cat1"分配给下拉

 <select name = "cat1" id="cat1" onChange="myFunction()">
    <?php
    $s = mysql_query("SELECT * FROM `CATEGORIES_1`");
    while ($row = mysql_fetch_assoc($s)) {
        echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>');
    }
    ?>
</select>

使用ajax调用和不同的php页面生成基于ajax调用的响应，将选定的下拉id作为参数发送到php页面。并将传入的响应设置为下面的下拉列表。如果您使用Jquery，则使用

 $('[name=cat1]').val()

<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>
alert($( "#myselect option:selected" ).text());

这里正在处理JSFIDDLE