select value base on previous select value

[iccsi]

I have 5 select on the form and each one uses different data source from the query like following.

I want to every one data limite by previous dropdown just like department, manager, supervisoe, leader and employees.

If user select the first one department 1 then all the rest dropdown only shows department one managers, supervisors, leaders and employees.

If user select one supervisors than only employee in hos or her group available for the users.

I need pass client, previous value to the server and send back to client the rest of dropdown box.

Any better way to handle this issue?

Your help and information is great appreciated,

Regards,

Iccsi,

  <select name="MyList1" id="MyList1">

  <cfoutput query="Myquery1">

   <option value="#MyQuery1.MyID#">#MyQuery1.Mycode#</option>

  </cfoutput>

  </select>

<select name="MyList2" id="MyList2">

  <cfoutput query="Myquery2">

   <option value="#MyQuery2.MyID#">#MyQuery2.Mycode#</option>

  </cfoutput>

  </select>

<select name="MyList3" id="MyList3">

  <cfoutput query="Myquery3">

   <option value="#MyQuery3.MyID#">#MyQuery3.Mycode#</option>

  </cfoutput>

  </select>

<select name="MyList4" id="MyList4">

  <cfoutput query="Myquery4">

   <option value="#MyQuery4.MyID#">#MyQuery4.Mycode#</option>

  </cfoutput>

  </select>

<select name="MyList5" id="MyList5">

  <cfoutput query="Myquery5">

   <option value="#MyQuery5.MyID#">#MyQuery5.Mycode#</option>

  </cfoutput>

  </select>

[Carl Von Stetten · Accepted solution]

You are going to have to do some JavaScript/AJAX work to update the option values for the last four dropdowns.  Using jQuery this isn't terribly difficult, and there are a number of blog posts and jQuery plugins out there to accomplish this.  Try Googling "jQuery chained select".

-Carl V.

[iccsi]

Thanks a million for the informaiton and help,

Yes, jQuery chain  Select is what I am looking for,

Thanks again,

Regards,

Iccsi,

[iccsi]

for some reason I tried to do following code, but  it does not work for jQuery Chain.

Can you please help me to find out which area I need check or modify?

Your help and information is great appreciated,

Regards,

iccsi,

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<script type="text/javascript" src="../../JavaScripts/jquery.chained.remote.js"></script>

<select id="mark" name="mark">

  <option value="">--</option>

  <option value="bmw">BMW</option>

  <option value="audi">Audi</option>

</select>

<select id="series" name="series">

  <option value="">--</option>

  <option value="series-3" class="bmw">3 series</option>

  <option value="series-5" class="bmw">5 series</option>

  <option value="series-6" class="bmw">6 series</option>

  <option value="a3" class="audi">A3</option>

  <option value="a4" class="audi">A4</option>

  <option value="a5" class="audi">A5</option>

</select>

<script>

$("#series").remoteChained("#mark");

<!---$("#series").chainedTo("#mark");--->

</script>