javascript - Selectbox change content using jQuery/AJAX -

i trying find best solution this: have categories, subcategories, sub-subcategories etc. , need have in different selectboxes. example: first there be:

<select>     <option value="cars">cars</option>     <option value="electronic">electronic</option>     <option value="garden">garden</option> </select> 

after when user choose example cars select box changes

<select>     <option value="volvo">volvo</option>     <option value="saab">saab</option>     <option value="mercedes">mercedes</option>     <option value="audi">audi</option> </select>  

concept of page 1 box in middle of page , after choose first category box disappear , there come new box subcategory. best solution , how in ajax?

i wrote jsfiddle: http://jsfiddle.net/thauwa/xgfqn/

basically, have use code this:

html

<select id="optionsset1" class="justanotherdropdown">     <option value=""></option>     <option value="cars">cars</option>     <option value="electronic">electronic</option>     <option value="garden">garden</option> </select> <select id="optionsset2" class="justanotherdropdown"></select> <select id="optionsset3" class="justanotherdropdown"></select> <select id="optionsset4" class="justanotherdropdown"></select> 

jquery

$(".justanotherdropdown").not($(".justanotherdropdown").first()).hide(); // hide first of <select> tags $(".justanotherdropdown").change(function () { // jquery event handler.     var changedid = $(this).attr('id');     var prefixid = changedid.slice(0, -1);     var nextidnumber = parseint(changedid.substr(changedid.length - 1)) + 1;     var nextid = prefixid + nextidnumber;     var nextoptionsset = "optionsset" + nextidnumber;     $.ajax({         url: 'yourphppage.php', // change php script's actual path.         data: {             value: $(this).val(), // uncomment line when using php.             id: changedid, // uncomment line when using php.         },         type: "post",         success: function (response) {             $("#" + changedid).hide(); // hide previous box.             $("#" + nextid).html(response).show("slow"); // drammatically show next.         }     }); }); 

php

    $selecteditem = $_post['id'];     $selecteditemvalue = $_post['value'];     switch ($selecteditem) {         case 'optionsset2':             switch ($selecteditemvalue) {                 case 'cars':                     echo 'html display relevant `options`, escaped.';                     break;                 case 'electronic':                     echo 'html display relevant `options`, escaped.';                     break;                 case 'garden':                     echo 'html display relevant `options`, escaped.';                     break;             }             break;         case 'optionsset3':             /** add more code here. **/     } /** method inefficient, , 'strainful', compared using json. **/  

i hope code self-explanatory.