jQuery Chained Select Ajax - help needed

I recently posted my question see previous question and received a great working solution but when I applied the solution to my code, I found that if there was any html tags between the two selects, the second select list would not update. My guess is t开发者_StackOverflow中文版hat the .next was not finding the class I was searching for.

<cfloop query="rsRequestSystems">
<tr>
    <td><select class="platform" name="platform" id="platform">
            <option></option>
            <cfloop query="rsPlatform">
                <option value="#rsPlatform.optionValue#" <cfif rsRequestSystems.platform eq rsPlatform.optionValue>selected</cfif>>#rsPlatform.optionDesc#</option>
            </cfloop>
        </select></td>
    <td><select name="model" id="model">
            <option></option>
            <cfloop query="rsModels">
                <option value="#rsModels.optionValue#" <cfif rsRequestSystems.model eq rsModels.optionValue>selected</cfif>>#rsModels.optionDesc#</option>
            </cfloop>
        </select></td>
</tr>

and the jQuery code is:

$(".platform").live("change", function() {
    var firstOption = $(this);
    $.getJSON("index.cfm?do=misc.getModels",{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("#model").html(options);
    });
});

and here is a sample of the json data being returned:

[{"optionValue":"", "optionDisplay":"Select Model"},]

---

IDs have to be unique. As your code represents a table row, I assume other rows look similar. If this is the case, use classes instead.
But if these are really the only elements with this IDs you can simply use:

$('#model').html(options);

---

next only selects the next sibling if it matches the selector. Based on your HTML, you could do:

firstOption.parent().next().children('select').html(options);

---

Actually, your code should not work as you add the live handler to elements with class platform, not ID. Maybe a typo?

Assuming your elements have classes instead of IDs, you can also do:

firstOption.closest('tr').find('.model').html(options);

---

why not just this:

$("#model").html(options);

the <select> already has an id assigned to it

---

what about:

$(".platform").live("change", function() {
    var firstOption = $(this);
    $.getJSON("index.cfm?do=misc.getModels",{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>';
            }
   $("#model").html(options);
    });
});

Just change the next, I think because is an ID, there wouldn't be another element with the same ID.