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是我.ajax请求的触发器。其余代码我只是在成功的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＆amp; 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");
      });
}

PHP伴随着这个特殊的jquery：

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

总是那些花费你几天时间的小错误。对于那些希望找到适合级联选择下拉框的代码的人，这里是我的功能和完全扩展的代码（其中还包括三级级联） 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中调用该函数。

请注意评论，这是多余的＆＃39;调用禁用并强制最后一个框选择默认值，以防用户在所有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让我对我的档案进行不同的审视。

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

级联选择

1 个答案: