Cascading select

Question

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

Answer 1

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.