jQuery to update select list

Question

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?

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.

The class of the 1st select list is platform and the 2nd one is model.

updates every 2nd select list: $("select.model").html(options)

nothing updates: $("select.model").next().html(options);

Any help would be 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 = '';
            for (var i = 0; i < j.length; i++) 
                {
                    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                }
        $(this).next("#mySecondSelect").html(options);      
        });
    });

});
</script>

And here is a sample JSON results for 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"}]

Answer 1

if i'm reading right, the reason .next() is not working is because you're selecting the dropdown you want to update and then moving to the next one. if your (pseudo)html looks like this

<div id="mySelectArea">
  <select id="myFirstOption">
    <option>1</option>
  </select>
  <select id="mySecondSelect">
    <option>2</option>
  </select>
</div>

and you have a change event of the first select the code would be

$(this).next("#mySecondSelect").options(html);

---

based on your edit, change your javascript to this:

jQuery(document).ready(function() {
    $(".myFirstOption").live("change", function() {
        var firstOption = $(this);
        $.getJSON("live_getModels.cfm",{platform: $(this).val()},       
        function(j){
            var options = '';
            for (var i = 0; i < j.length; i++){
                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            firstOption.next("#mySecondSelect").html(options);      
        });
    });

});

i'm relatively sure inside of the ajax success function this = window, so you have to save a reference to the original object.

Answer 2

Why don't you have the user fill a form with all the informations, and append them to the list only at the end?

This way you don't have to worry about having n dropdowns around.