级联选择

提前抱歉大家都知道这个问题，因为我知道级联选择框已经完成了死亡，但我似乎找不到任何好的帮助。 我尝试了各种各样的东西，但似乎都失败了，我不明白为什么。

这是我目前的jquery：

function tester() { $("select#type").attr('disabled', 'disabled'); $("select#cat").change(function(){ var vid = $("select#cat option:selected").attr('value'); var request = $.ajax({ url: "show_type.php", type: "POST", data: {id : vid} }); request.done(function(msg) { $("#result").html( msg ); }); request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); }); }); } 

不要介意使用select#type的代码的第一部分并select#cat .change ，因为这些是我试图首先填充代码的内容，但是.change是我的.ajax请求的触发器。 剩下的代码我只是试图将一个简单的返回消息转储到一个空的div#result成功的ajax请求。

我运行了一个测试， var vid正确填充。

这是我试图用ajax调用的简单PHP文件：

我想也许问题是id没有正确传递所以我改变了PHP脚本给我任何有效的输出，无论是否设置了$_POST 。

我不会发布HTML，因为我只是试图在测试时将所有内容转储到div 。 当我运行脚本时，我收到“请求失败”错误消息，并显示“错误”消息。

这是我尝试过的其他jquery和PHP，使用.post而不是.ajax ：

 function tester() { $("select#type").attr('disabled', 'disabled'); $("select#cat").change(function(){ $("select#type").html("wait..."); var vid = $("select#cat option:selected").attr('value'); $.post("show_type.php", {id:vid}, function(data){ $("#result").empty().append(data); }, "json"); }); } 

和这个特殊的jquery一起使用的PHP：

 $requ = $_POST['id']; $ret = 'You selected: ' . $requ; echo json_encode($ret); 

这一切都失败了。 我也尝试了上面的代码而不使用json编码/参数。 我想做的只是一个简单的（所以我认为）级联选择dropbox。 第二个框依赖于第一个框选择。 我开始认为这一切都可能不值得，只是严格坚持使用链接重新提交带有GET的页面并使用第一次点击的结果填充新的部分或div。 我们将非常感谢您提出的任何帮助或建议，我花了两天时间试图弄明白这一切。 提前致谢

Answer 1

好吧，我把它修好了。 感谢Mian_Khurram_ljaz让我对文件的层次结构有不同的看法。 我假设因为js正在调用php文件，通过将php文件放在与js相同的文件夹中，我可以使用url: show_type.php来调用php，但这实际上是错误的。 从调用js和php的实际页面考虑结构，因此url应该是js/show_type.php因为我在js文件夹中有show_type.php文件。

总是那些花费你几天时间的小错误。 对于那些希望找到适合级联选择下拉框的代码的人，这里是我的function和完全扩展的代码（其中还包括三级级联）jQuery：

 function project() { $("select#model2").attr('disabled', 'disabled'); $("select#brand2").attr('disabled', 'disabled'); $("select#project").change(function(){ $("select#model2").attr('disabled', 'disabled'); // if changed after last element has been selected, will reset last boxes choice to default $("select#model2").html('Choose...'); $("select#brand2").html("Please wait..."); var pid = $("select#project option:selected").attr('value'); $.post("handler/project.php", {id:pid}, function(data){ $("select#brand2").removeAttr("disabled"); $("select#brand2").html(data); }); }); $("select#brand2").change(function(){ $("select#model2").html("Please wait..."); var bid = $("select#brand2 option:selected").attr('value'); var pid = $("select#project option:selected").attr('value'); $.post("handler/projBrand.php", {proj: pid, bran: bid}, function(data){ $("select#model2").removeAttr("disabled"); $("select#model2").html(data); }); }); } 

只需调用你的js的$(document).ready中的函数。

请注意注释，通过此“冗余”调用禁用并强制最后一个框选择默认值，以防用户在所有3个框中进行选择但返回第一个框并更改选择。

这是php处理程序文件：

  getModelvBrand(); echo $request; ?> 

jQuery的另一个处理程序文件几乎完全相同，只调用类文件中的不同方法。

最后，HTML：

 
  Choose...  getProject();?> //populates first box on page load   Choose...   Choose...  

   

再次感谢Mian让我对我的文件有不同的看法。

希望这段代码能在不久的将来帮助其他人。