JQuery Chained Select Ajax - нужна помощь

Question

Я недавно опубликовал свой вопрос см. Предыдущий вопрос и получил отличное рабочее решение, но когда я применил решение к своему коду, я обнаружил, что если между двумя выборками есть какие-либо html-теги, то второй выбор список не будет обновляться. Я думаю, что .next не нашел класс, который я искал.

<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>

и код jQuery:

$(".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);
    });
});

и вот пример возвращаемых данных json:

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

Answer 1

ID должны быть уникальными . Поскольку ваш код представляет строку таблицы, я предполагаю, что другие строки выглядят одинаково. Если это так, используйте вместо этого классы.
Но если это действительно единственные элементы с такими идентификаторами, вы можете просто использовать:

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

---

next выбирает следующего брата, только если он соответствует селектору. Исходя из вашего HTML, вы можете сделать:

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

---

На самом деле ваш код не должен работать, когда вы добавляете обработчик live к элементам с class platform, а не ID. Может быть, опечатка?

Предполагая, что ваши элементы имеют классов вместо идентификаторов, вы также можете сделать:

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

Answer 2

как насчет:

$(".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);
    });
});

Просто измените следующий, я думаю, потому что это идентификатор, не было бы другого элемента с таким же идентификатором.

Answer 3

почему бы не просто так:

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

<select> уже назначен идентификатор