JQuery, JSON, выпадающий о мой

Question

У меня есть форма, в которой, если пользователь меняет платформу (операционную систему), вызывается ajax-вызов, и доступные модели извлекаются в формате json.Я могу вызвать вызов ajax и получить обратно правильно отформатированные данные, но не могу раскрыть раскрывающуюся модель для обновления с новым значением (пары значений json).У меня нет идентификаторов, потому что некоторые строки добавляются динамически, поэтому мне нужно ответить на обход DOM с помощью таких элементов, как .next (), .find () и т. Д., И я пока не очень хорош в этом.

Вот форма:

<div class="field inline">
<label class="frmFlds_labels">Platform</label>
<select name="platform" onChange="updateModels(this,18);" class="platform">
    <option value=""></option>
    <option value="IBM" selected="selected">AIX</option>
    <option value="HP">HP-UX</option>
    <option value="LINUX">Linux</option>
    <option value="SUN">Solaris</option>
    <option value="WINTEL">Wintel</option>
    <option value="Other">Other</option>
</select>
</div>
<div class="field inline" platform="IBM">
<label class="frmFlds_labels">Model</label>
<select name="model" class="model">
    <option value=""></option>
    <option value="LPAR on p550">LPAR on p550</option>
    <option value="LPAR on p561">LPAR on p561</option>
    <option value="LPAR on p570">LPAR on p570</option>
</select>

Вот код JS:

function updateModels(i,id){
var pltfrm = $(i).val();
var firstOption = $(this);
$.getJSON("index.cfm?do=misc.getModels&platform=" + pltfrm,
    function(j){
        var options = '';
        for (var i = 0; i < j.length; i++){
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        firstOption.next().children('.model').html(options);
    });
}

Answer 1

Предполагая, что ход от обработчика изменений при выборе, а firstOption - выбор, вам нужно перейти к parent (), а затем next ()

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

Answer 2

ЕСЛИ вы немного изменили свой макет, удалив код из разметки: я добавил пользовательский атрибут: data-id

<div class="field inline">
   <label class="frmFlds_labels">Platform</label>
   <select name="platform" data-id="18" class="platform">
     <option value=""></option>
     <option value="IBM" selected="selected">AIX</option>
     <option value="HP">HP-UX</option>
     <option value="LINUX">Linux</option>
     <option value="SUN">Solaris</option>
     <option value="WINTEL">Wintel</option>
     <option value="Other">Other</option>
 </select> 
</div> 
<div class="field inline" platform="IBM">
 <label class="frmFlds_labels">Model</label>
 <select name="model" class="model">
     <option value=""></option>
     <option value="LPAR on p550">LPAR on p550</option>
     <option value="LPAR on p561">LPAR on p561</option>
     <option value="LPAR on p570">LPAR on p570</option>
 </select> 
</div>

, затем используйте это:

function updateModels(p, id) {
    var firstOption = $(p);
    var pltfrm = firstOption.val();
    var model = firstOption.parent().next().find('.model');
    $.getJSON("index.cfm?do=misc.getModels&platform=" + pltfrm, 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);
    });
}
$('.platform').change(function() {
    var id = $(this).attr('data-id');
    updateModels($(this), id);// I do not see you using the id but...
});

РЕДАКТИРОВАТЬ: Другой код, если вещи динамически добавляются на страницу:

$(document).on('change','.platform', function() {
    var id = $(this).attr('data-id');
    updateModels($(this), id);// I do not see you using the id but...
});