How to create chained eventHandlers in jQuery for repeated element groups

Question

I am new to jQuery and this is probably not the best use case, but it is a project that I have to do.

Basically, I have a form with a set of inputs where the values ​​of the child inputs will be changed based on the values ​​in the parent. (Using Ajax to retrieve datasets).

Essentially: List of items → Available sizes → display Price for the selected size

This is all pretty straight forward, and I have something functioning for one set of grouped inputs.

But I was fixated on how to make this work for instances of "N". I use an index for item identifiers to group related items (ie, Input_name_ [0 .. N]) and give unique identifiers in the document.

HTML:

<form ...> <fieldset> <select id="item_list_0" name="item_list_0"> <option value=''>Select an Item</option> </select> <select id="size_0" name="size_0"> <option value="">Select Size</option> </select> <input id="price_0" name="price_0" size="10" value="Unit Price" /> </fieldset> <fieldset> ..... repeated with inputs named: input_name_1 </fieldset> . . <!-- up to N --> fieldsets --> . </form> 

A jQuery script that works for a specific identifier "set" (i.e.: item_list_0)

  <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("select#item_list_0").change(function(){ $.getJSON(url,{data}, function(json){ var obj = json.pl.size; var options = '<option value="">Size</option>'; for (var i = 0; i < obj.length; i++) { options += '<option value="' + i + '">' + obj[i] + '</option>'; } $("select#size_0").html(options); }); }); $("select#size_0").change(function(){ $.getJSON(url,{data}, function(json){ var price = json.pl.price; var size = $("select#size_0").val(); $("input#price_0").val(price[size]); }); }); }); // end ready function </script> 

For reference, json returned from the url:

 {"pl":{"name":"item Name","price":["110.00","40.00","95.00"],"size":["LG","SM","MED"]}} 

My problems: 1. It is necessary to remove a specific identifier in .click events in order to be dynamic for all "N" sets of fields 2. It is necessary to maintain relations for chains. (item_list_0.click should NOT use size_1 option list)

I looked at the jquery.selectChain plugin and the jquery.cascade plugin, but none of them work for my specific situation.

Answer 1

Apply a class to each of your select#item_list_N and select#size_N . You will receive the following HTML:

 <form> <fieldset> <select id="item_list_0" name="item_list_0" class="item_list"> <option value=''>Select an Item</option> </select> <select id="size_0" name="size_0" class="size"> <option value="">Select Size</option> </select> <input id="price_0" name="price_0" size="10" value="Unit Price" /> </fieldset> <fieldset> <!-- repeated with inputs named: input_name_1 --> </fieldset> <!-- up to N fieldsets --> </form> 

You can then use the generic function to serve each individual instance of your set of fields. Below is a draft version of what I mean:

 $(document).ready(function() { $(".item_list").change(function() { // Let assume that you only need to retrieve // a unique number to identify the fieldset. var uniquePart = $(this).attr('id').replace(/\D/g, ''); // This part left almost untouched $.getJSON(url, {data}, function(json) { var obj = json.pl.size, options = ['<option value="">Size</option>']; for (var i = 0, len = obj.length; i < len; i+= 1) { options.push('<option value="' + i + '">' + obj[i] + '</option>'); } // Here we apply the id number $("#size_" + uniquePart).html(options.join('')); }); }); $(".size").change(function() { var $this = $(this), // Same idea here uniquePart = $this.attr('id').replace(/\D/g, ''), size = $this.val(); $.getJSON(url, {data}, function(json) { var price = json.pl.price, // By the way, ID selectors are told // to be more efficient without specifying a tag $("#price_" + uniquePart).val(price[size]); }); }); }); // end ready function