Databases
StackOverflow2013
Postsdbo
POHow to create chained eventHandlers in JQuery on repeated groups of elements
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create chained eventHandlers in JQuery on repeated groups of elements
    text
    copied!<p>I'm pretty new to JQuery, and this is probably not the best use case to learn on, but it's the project I have to do. </p> <p>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 the data sets). </p> <p>Essentially: Item List -> Available Sizes -> display Price for selected size</p> <p>This is all pretty much straight forward, and I have something functioning for a single set of grouped inputs. </p> <p>But I'm stuck on how to make this work for 'N' instances. I'm using an index on the element ids to group the related elements (i.e. input_name_[0 .. N]) and give unique ids throughout the document.</p> <p>The HTML:</p> <pre><code>&lt;form ...&gt; &lt;fieldset&gt; &lt;select id="item_list_0" name="item_list_0"&gt; &lt;option value=''&gt;Select an Item&lt;/option&gt; &lt;/select&gt; &lt;select id="size_0" name="size_0"&gt; &lt;option value=""&gt;Select Size&lt;/option&gt; &lt;/select&gt; &lt;input id="price_0" name="price_0" size="10" value="Unit Price" /&gt; &lt;/fieldset&gt; &lt;fieldset&gt; ..... repeated with inputs named: input_name_1 &lt;/fieldset&gt; . . &lt;!-- up to N --&gt; fieldsets --&gt; . &lt;/form&gt; </code></pre> <p>JQuery script that works for a specific id "set" (i.e.: item_list_0)</p> <pre><code> &lt;script type="text/javascript" src="/js/jquery-1.6.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $("select#item_list_0").change(function(){ $.getJSON(url,{data}, function(json){ var obj = json.pl.size; var options = '&lt;option value=""&gt;Size&lt;/option&gt;'; for (var i = 0; i &lt; obj.length; i++) { options += '&lt;option value="' + i + '"&gt;' + obj[i] + '&lt;/option&gt;'; } $("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 &lt;/script&gt; </code></pre> <p>For reference the json returned from the url is:</p> <pre><code>{"pl":{"name":"item Name","price":["110.00","40.00","95.00"],"size":["LG","SM","MED"]}} </code></pre> <p>My challenges: 1. Need to remove the specific ID in the .click events to be dynamic for all 'N' of the field sets 2. Need to keep the relationships for the chains. (item_list_0.click should NOT effect size_1 option list)</p> <p>I have looked at the jquery.selectChain plugin, and the jquery.cascade plugin, but neither seems to work for my particular situation.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload