级联选择

Question

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

这是我目前拥有的 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 是我触发 @ 987654325@ 请求。其余的代码我只是想在成功的 ajax 请求后将一个简单的返回消息转储到一个空的 div#result 中。

我进行了测试，var vid 正确填充。

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

<?php
$requ;

if (isset($_POST['id'])) {
   $requ = 'Worked';
} else {
   $requ = "didn't work";
}


echo $requ;
?>

我认为问题可能是 id 未正确传递，因此我更改了 PHP 脚本以提供任何有效输出，无论是否设置了 $_POST。

我不会发布 HTML，因为我只是想在测试时将其全部转储到 div 中。当我运行脚本时，我收到带有“错误”消息的“请求失败”错误消息。

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

function tester() {
$("select#type").attr('disabled', 'disabled');
$("select#cat").change(function(){

            $("select#type").html("<option>wait...</option>");

            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 编码/参数。我想做的只是一个简单的（所以我想）级联选择保管箱。第二个框取决于第一个框的选择。我开始认为这一切可能不值得，只是严格遵守 PHP 的链接，使用GET 重新提交页面，并使用第一次单击的结果填充新的部分或 div。非常感谢您提供的任何帮助或建议，我已经花了 2 天的时间试图弄清楚这一切。提前致谢

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文件。

你总是需要几天的时间来弄清楚这些小错误。对于那些将来希望找到用于级联选择下拉框的体面代码的人，这是我的功能和完全扩展的代码（其中还包括三级级联） 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('<option selected="selected">Choose...</option>'); 
   $("select#brand2").html("<option>Please wait...</option>");
   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("<option>Please wait...</option>");
   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 处理程序文件：

<?php
include_once('../includes/file.inc');


$request = $opt -> getModelvBrand();

echo $request;
?>

jQuery 的其他处理程序文件几乎完全相同，只是在类文件中调用了不同的方法。

最后，HTML：

<form action="" method="post">
       <select id="project">
          <option value="0">Choose...</option>
          <?php echo $opt -> getProject();?> //populates first box on page load
       </select>
       <select id="brand2">
          <option value="0">Choose...</option>
       </select>
       <select id="model2">
          <option value="0">Choose...</option>
       </select>
       <br /><br />
       <input class="like-button" type="submit" title="Submit" value="" />
</form>

再次感谢 Mian 让我以不同的方式看待我的文件。

希望此代码在不久的将来对其他人有所帮助。