级联选择 [英] Cascading select

问题描述

对于这个问题，每个人都提前表示歉意，因为我知道级联选择框已经死了，但是我似乎找不到任何帮助.我已经尝试了各种方法，但是一切似乎都失败了，我也不明白为什么.

这是我目前拥有的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&我也尝试过使用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天的时间努力解决所有问题.预先感谢

解决方案

好的，我已经解决了.感谢Mian_Khurram_ljaz使我对文件的层次结构有了不同的了解.我假设由于js调用php文件，因此将php文件放在与js相同的文件夹中，因此我可以使用url: show_type.php来调用php，但这实际上是错误的.该结构是从调用js和php的实际页面中考虑的，因此，由于我的js文件夹中有show_type.php文件，因此该URL应该为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个框中都进行了选择，但又回到第一个框并更改了该选择. /p>

这是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，让我对自己的文件有了不同的看法.

希望这段代码在不久的将来能对其他人有所帮助.

Sorry in advance everyone for this question as I know the cascading select boxes has been done to death but I can't seem to find any good help. I've tried various things but it all seems to fail and I'm not understanding why.

Here's the jquery I have currently:

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 );
                });
        });
}

Don't mind the first section of the code with the select#type and select#cat as these are for what I was trying to get the code to populate at first, however the .change is my trigger for the .ajax request. The rest of the code I'm merely trying to dump a simple return message into an empty div#result upon a successful ajax request.

I ran a test, and the var vid populates correctly.

Here's the simple PHP file I'm trying to call with the ajax:

<?php
$requ;

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


echo $requ;
?>

I thought perhaps the problem was the id wasn't being passed properly so I altered the PHP script to give me any valid output regardless of whether the $_POST was set or not.

I won't post the HTML as I'm just trying to dump this all into a div while I test it. When I run the script I get the 'Request Failed' error message with a message of "error".

Here is the other jquery & PHP I have also tried, using the .post instead of the .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");
      });
}

And the PHP to accompany this particular jquery:

$requ = $_POST['id'];

$ret = 'You selected: ' . $requ;

echo json_encode($ret);

Again, it all failed. I also tried the above code without using the json encoding/parameters. All I want to do is a simple (so I would think) cascading select dropboxes. The second box to be dependent of the first boxes selection. I'm beginning to think that this all just may not be worth it and just sticking strictly to PHP with links to resubmit the page with a GET and populate a new section or div with the results of the first click. Any help or suggestions you might have would be greatly appreciated, I've spent 2 solid days trying to figure this all out. Thanks in advance

解决方案

Alright, I got it fixed. Thanks to Mian_Khurram_ljaz for making me take a different look at the hierarchical structure of the file. I was assuming that since the js was calling the php file, by placing the php file in the same folder as the js, I could call the php by using the url: show_type.php but that was actually wrong. The structure is considered from the actual page invoking the js and php, and therefore the url should have been js/show_type.php since I had the show_type.php file in my js folder.

It's always the little mistakes that take you days to figure. For those in the future looking to find decent code for cascading select drop boxes, here is my functioning and fully expanded code (which also includes a tri-level cascade) 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);
   });
  });
}

Just call the function in the $(document).ready of your js.

Notice the comment, having this 'redundant' call to disable and force the last box to select the default is just in case the user makes a selection in all 3 boxes but goes back to the first box and changes the selection.

Here is the php handler file:

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


$request = $opt -> getModelvBrand();

echo $request;
?>

The other handler file for the jQuery is nearly exactly the same, only invoking a different method in the class file.

And lastly, the 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>

Thanks again Mian for making me take a different look at my file(s).

Hope this code helps someone else in the near future.

这篇关于级联选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！