Chaining multiple select box options to a single select

Question

I am using a modified version of the jquery plugin jquery.chained.js to filter out select box options and checkboxes based on another value of a select box. However, now I am needing to filter a select box based on what options 2 of the previous select boxes are.

I have 3 select boxes.

1. Staff
2. Rooms
3. Services

and a few checkboxes OR select boxes for

• Addons

The above addons depends on a preference to either show it as checkboxes or dropdowns

The way it is right now if you change Staff then the Services and Addons options will change to what ever services that staff has access to. However I now need to make it so that Services and Addons will set based on what Staff has access to those Services and what Rooms Offer those services.

Is anyone able to help me modify this already modified script to add support for multiple select boxes? I want to try and keep it generic as we may possible be using this chained to script for other elements as well.

To sum up what I am looking for is to add support for Rooms select box to further filter down the Services and AddonServices options.

Example code can be found http://bit.ly/uzEDL2

EDIT: The checkboxradio() is for jquery Mobile so don't worry about those.

Answer 1

To make child select depend on values of two parents use classname like first\second. Note that if you have really complicated select structure maintaining this kind of classes will get cumbersome. In that cause it might be easier to use the remote version of the plugin.

Example taken from plugin documentation. In this example diesel engine is available only for BMW 3 and 5 series Sedans. This is achieved by using classnames series-3\sedan and series-5\sedan.

<select id="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>

<select id="model">
  <option value="">--</option>   
  <option value="coupe" class="series-3 series-6 a5">Coupe</option>
  <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
  <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
  <option value="sportback" class="a3 a5">Sportback</option>
</select>

<select id="engine">
  <option value="">--</option>   
  <option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option>
  <option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
  <option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option>
</select>

$("#model").chained("#series");
$("#engine").chained("#series, #model");

Note that your HTML is not valid. Single number is not a valid class name. Class name must begin with an underscore letter [a–z], underscore [_]or dash [-] then followed by numbers, letters, underscores and dashes. Better explanation can be found from: Allowed characters for CSS identifiers.