Databases
StackOverflow2013
Postsdbo
POjQuery to update select list
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery to update select list
    text
    copied!<p>I have a form where a user can submit a form to indicate which systems need to be updated. In the form, they can dynamically add systems to the form so I do not have unique ids available. In the form, they have to select a platform (unix, hp, wintel, etc) and then the corresponding model to accompany the selected platform - think chained select. When the first selected list in an "item" is changed, an ajax call is made to obtain the values for the 2nd select list. How can I update the 2nd select list in the "item" only for the corresponding chained select?</p> <p>I'm using the clone method to allow users to add items to the form. As such, the id is no longer unique on the page so I'm using the class to figure out which select button was change. The way it is working right now, every 2nd select list is updated and I only want the select chained select list corresponding to the 1st select list changed updated. I believe next() is the answer but I guess my syntax is incorrect.</p> <p>The class of the 1st select list is platform and the 2nd one is model.</p> <p><strong>updates every 2nd select list</strong>: $("select.model").html(options)</p> <p><strong>nothing updates</strong>: $("select.model").next().html(options); </p> <p>Any help would be appreciated.</p> <pre><code>&lt;div id="mySelectArea"&gt; &lt;select id="myFirstOption" class="myFirstOption"&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;option&gt;3&lt;/option&gt; &lt;/select&gt; &lt;select id="mySecondSelect" class="mySecondSelect"&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;option&gt;3&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div id="mySelectArea"&gt; &lt;select id="myFirstOption" class="myFirstOption"&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;option&gt;3&lt;/option&gt; &lt;/select&gt; &lt;select id="mySecondSelect" class="mySecondSelect"&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;option&gt;3&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;script&gt; jQuery(document).ready(function() { $(".myFirstOption").live("change", function() { $.getJSON("live_getModels.cfm",{platform: $(this).val()}, function(j){ var options = ''; for (var i = 0; i &lt; j.length; i++) { options += '&lt;option value="' + j[i].optionValue + '"&gt;' + j[i].optionDisplay + '&lt;/option&gt;'; } $(this).next("#mySecondSelect").html(options); }); }); }); &lt;/script&gt; </code></pre> <p>And here is a sample JSON results for more accurate demo:</p> <pre><code>[{"optionValue":"", "optionDisplay":"Select Model"},{"optionValue":"TBD", "optionDisplay":"TBD"},{"optionValue":"SCCM", "optionDisplay":"SCCM-standalone"},{"optionValue":"Manual", "optionDisplay":"Manual-standalone"},{"optionValue":"SCCM-VMWare", "optionDisplay":"SCCM-VMWare"},{"optionValue":"Manual-VMWare", "optionDisplay":"Manual-VMWare"},{"optionValue":"SCCM Hybrid", "optionDisplay":"SCCM Hybrid"},{"optionValue":"SCCM Hybrid VMWare", "optionDisplay":"SCCM Hybrid VMWare"},{"optionValue":"SCCM Offline", "optionDisplay":"SCCM Offline"},{"optionValue":"SCCM Offline - VMWare", "optionDisplay":"SCCM Offline - VMWare"}] </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