StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Apply a class to each of your <code>select#item_list_N</code> and <code>select#size_N</code>. You will get the following HTML:</p> <pre><code><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>  </fieldset>  </form> </code></pre> <p>Then you could use a generic function to serve every single instance of your fieldset. The following is a raw draft of what I mean:</p> <pre><code>$(document).ready(function() { $(".item_list").change(function() { // Let's 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 </code></pre>

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