ajax - jQuery to update select list -
i have form user can submit form indicate systems need updated. in form, can dynamically add systems form not have unique ids available. in form, have select platform (unix, hp, wintel, etc) , corresponding model accompany selected platform - think chained select. when first selected list in "item" changed, ajax call made obtain values 2nd select list. how can update 2nd select list in "item" corresponding chained select?
i'm using clone method allow users add items form. such, id no longer unique on page i'm using class figure out select button change. way working right now, every 2nd select list updated , want select chained select list corresponding 1st select list changed updated. believe next() answer guess syntax incorrect.
the class of 1st select list platform , 2nd 1 model.
updates every 2nd select list: $("select.model").html(options)
nothing updates: $("select.model").next().html(options);
any appreciated.
<div id="myselectarea"> <select id="myfirstoption" class="myfirstoption"> <option>1</option> <option>2</option> <option>3</option> </select> <select id="mysecondselect" class="mysecondselect"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div id="myselectarea"> <select id="myfirstoption" class="myfirstoption"> <option>1</option> <option>2</option> <option>3</option> </select> <select id="mysecondselect" class="mysecondselect"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <script> jquery(document).ready(function() { $(".myfirstoption").live("change", function() { $.getjson("live_getmodels.cfm",{platform: $(this).val()}, function(j){ var options = ''; (var = 0; < j.length; i++) { options += '<option value="' + j[i].optionvalue + '">' + j[i].optiondisplay + '</option>'; } $(this).next("#mysecondselect").html(options); }); }); }); </script>
and here sample json results more accurate demo:
[{"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"}]
if i'm reading right, reason .next() not working because you're selecting dropdown want update , moving next one. if (pseudo)html looks this
<div id="myselectarea"> <select id="myfirstoption"> <option>1</option> </select> <select id="mysecondselect"> <option>2</option> </select> </div>
and have change event of first select code be
$(this).next("#mysecondselect").options(html);
based on edit, change javascript this:
jquery(document).ready(function() { $(".myfirstoption").live("change", function() { var firstoption = $(this); $.getjson("live_getmodels.cfm",{platform: $(this).val()}, function(j){ var options = ''; (var = 0; < j.length; i++){ options += '<option value="' + j[i].optionvalue + '">' + j[i].optiondisplay + '</option>'; } firstoption.next("#mysecondselect").html(options); }); }); });
i'm relatively sure inside of ajax success function = window, have save reference original object.
Comments
Post a Comment