javascript - 三个选择元素相互依赖更新

谁能帮助我解决这个问题，这使我发疯。


我有三个选择元素，
第一个命名为“ level1”，第二个命名为“ level2”，第三个命名为“ level3”
所有这些都将从post.php中获得结果，该结果从数据库中调用查询。
页面加载后，“ level1”将加载，并显示所有具有level1的记录
隐藏“ level2”，一旦onchange level1，将显示它并基于level1值加载所有level2记录。
“ level3”的过程相同，将取决于level2的值。


 问题


当我在Chrome浏览器的“网络”标签中选中时，帖子被两次调用。
我可以在“网络”标签中的帖子的“响应”标签中看到我想要的结果，但是它始终显示错误的数据。


请检查所附图片。
还附上我的代码。
即时通讯使用ajax和jquery。
感谢您的快速反应。
谢谢
阿扎姆

结果：http://i.stack.imgur.com/h9Yco.png

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

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





<form>
  <select name="level1" id="level1" onchange="getlevel2(this.value)" multiple size=10></select>
  <select name="level2" id="level2" onchange="getlevel3(this.value)" multiple size=10></select>
  <select name="level3" id="level3" onchange="" 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>

post.php

<?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>

关于javascript - 三个选择元素相互依赖更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23402312/