Javascript 三个选择元素会根据彼此进行更新

有人能帮我解决这个问题吗？它快把我逼疯了

我有三个选择元素， 第一个名为level1，第二个名为level2，第三个名为level3 它们都将从post.php获得结果，后者从数据库中调用querys。 加载页面后，level1将加载，并显示level1的所有记录 level2是隐藏的，一旦更改level1，它将显示并基于level1值加载所有level2记录。 level3的过程相同，取决于level2的值。 问题

当我在chrome的“网络”选项卡中检查时，Post被调用了两次。 我可以在“网络帖子”选项卡的“回复”选项卡中看到我想要的结果，但它始终显示错误的数据。 请检查所附图片。 还附上了我的代码。 我正在使用ajax和jquery。 感谢您的快速回复。 谢谢 阿扎姆

结果:

post.php

---

这可能会有帮助，如果有任何帮助，请告诉我

//dom ready
$(function(){

    $.post('post.php',{selected: $('#level1').val()},function(response){
      $('#level1').html(response); 
    });

    $("#level1").change(function(){
        $.ajax({
        type:'post',
        url: 'post.php',
        data: {selected:$('#level1').val()},
        success: function(html){
                $("#level2").html(html);
            }
        });
    });

    $("#level2").change(function(){
        $.ajax({
        type:'post',
        url: 'post.php',
        data: {selected:$('#level2').val()},
        success: function(html){
                $("#level3").html(html);
            }
        });
    });
})



<form>
  <select name="level1" id="level1" multiple size=10></select>
  <select name="level2" id="level2"  multiple size=10></select>
  <select name="level3" id="level3"  multiple size=10></select>

<input type="image" value="submit" src="addtocart.png" alt="submit Button" onMouseOver="this.src='addtocart.png'" width="10%">

</form>
<div id="search_results" style="display:inline"></div>

---

使用相同的值在$.ajax上调用$.post毫无意义。请将所有附加代码添加到问题本身中，而不是添加到注释中。$document.ready函数不会在$.post方法中启动，因为DOM已加载…您的数据应该是$'level1'。val而不是$'level1'？感谢您的快速响应，我应用了你推荐的代码，但不幸的是，我得到的所有级别的值都是1级。。还有其他方法吗？问题解决了。。谢谢你，潘卡，你真的帮了我。我是Jquery和ajax新手，感谢您的专业支持。事实上，我在我的问题中发布了post.php，您可以向上滚动。您的代码是正确的，但我必须使用$level2而不是使用$$level2.val！！看起来很奇怪，但我工作过。。这会影响我的应用程序性能吗？

<?php
include ("config.php");

$getcats = mysql_Query("select * from categories where level=1 order by tid ASC");

if ($_POST['level1'] != 0)
    {
    $getlevel2 = mysql_query("select * from categories where catID=$level1 and level=2");
    while ($level2Arr = mysql_Fetch_array($getlevel2))
        {
        echo "<option value=$level2Arr[tid]>$level2Arr[catName]</option>";
        }
    }
  else
    {
    while ($catsArr = mysql_fetch_array($getcats))
        {
        echo "<option value=$catsArr[tid]>$catsArr[catName]</option>";
        }
    } 
?>

//dom ready
$(function(){

    $.post('post.php',{selected: $('#level1').val()},function(response){
      $('#level1').html(response); 
    });

    $("#level1").change(function(){
        $.ajax({
        type:'post',
        url: 'post.php',
        data: {selected:$('#level1').val()},
        success: function(html){
                $("#level2").html(html);
            }
        });
    });

    $("#level2").change(function(){
        $.ajax({
        type:'post',
        url: 'post.php',
        data: {selected:$('#level2').val()},
        success: function(html){
                $("#level3").html(html);
            }
        });
    });
})



<form>
  <select name="level1" id="level1" multiple size=10></select>
  <select name="level2" id="level2"  multiple size=10></select>
  <select name="level3" id="level3"  multiple size=10></select>

<input type="image" value="submit" src="addtocart.png" alt="submit Button" onMouseOver="this.src='addtocart.png'" width="10%">

</form>
<div id="search_results" style="display:inline"></div>