Javascript jQuery，json，下拉菜单哦，天哪

我有一个表单，如果用户更改平台（操作系统），将调用ajax调用，并以json格式检索可用模型。我可以使用ajax调用fire并正确格式化数据，但无法使用新值（json值对）更新模型下拉列表。我没有ID，因为有些行是动态添加的，所以我需要用.next（）、.find（）等项来回答遍历DOM的问题，但我对此还不是很在行

表格如下：

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

站台
艾克斯
HP-UX
Linux
Solaris
温特尔
其他
模型
p550上的LPAR
p561上的LPAR
p570上的LPAR

以下是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);
    });
}

函数更新模型（i，id）{
var pltfrm=$（i）.val（）；
var firstOption=$（此项）；
$.getJSON（“index.cfm？do=misc.getModels&platform=“+pltfrm，
功能（j）{
var选项=“”；
对于（变量i=0；i

假设遍历是从select上的change handler开始的，而firstOption是select，则需要转到parent（）然后是next（）

---

如果只是稍微更改布局，请从标记中删除代码： 我添加了一个自定义属性：

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

---

如果问题出现在客户端，请显示客户端代码，而不是服务器代码。此函数的事件处理程序在哪里？我发布了服务器代码，以便您可以在帮助我使用.next（）或.find（）或其他任何内容时看到代码的格式。没有数据交付问题（对于更改）LOL服务器代码将有助于理解代码在页面上的布局。我发布的代码循环了1-100次。我需要帮助确定“下一个”下拉选项，以便填充它。我在一个博客中找到了一个这样做的代码示例，但他使用的是表行，而我使用的是DIV标记。@anderaturi onChange='updateModels（this）；'它位于CF自定义标记的传递中。@dlackey您应该使用.live（）来执行您需要的操作，但您需要以我认为不同的方式绑定它。我看到您添加了更多代码，并且它的作用域位于函数中……“this”没有上下文且未定义。“this”应该引用已更改的项。我没有正确地实现它吗？需要查看更多处理程序代码，不确定参数“I”和“id”是什么，“this”在函数中没有作用域我没有id，因为某些行是动态添加的。让我来处理你在这里发布的内容，我会看看是否可以调整它。

'data-id'

只是一个自定义属性，但可以是类似于'data-cow'的任何东西。我接受了你的

var model=firstOption.parent（）.next（）.find（'.model'）

和您的

model.html（选项）并且从那里它工作得非常好。在返回ajax调用和json数据时，我只需要显示这些数据，您的解决方案就可以工作了。谢谢你跟我坚持到底。你为什么要先去家长那里？为什么您不能直接转到下一个（）.find（）？更改在“选择”和下一个（同级）上，但要转到您得到的下一个DIV。parent（）.next（）-父母下一个同级。ooooooooohhhhhh。。。因为DIV是一个容器。因此，我向上移动到父容器！我想它开始点击了。非常感谢。
<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...
});