jQuery，json，下拉哦，天哪

Question

我有一个表单，如果用户更改平台（操作系统），就会调用ajax调用，并以json格式检索可用的模型。我可以启动ajax调用，并且可以正确地恢复数据格式，但我无法使用新值（json值对）更新模型下拉列表。我没有ID，因为有些行是动态添加的，所以我需要在遍历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

假设遍历来自select上的更改处理程序，firstOption是select，则需要转到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...
});