Question

我最近发布了我的问题see previous 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必须唯一。由于您的代码表示一个表行，我假设其他行看起来相似。如果是这种情况，请改用类但如果这些只是具有此ID的唯一元素，您可以使用：

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

next仅在与选择器匹配时才选择下一个兄弟。根据您的HTML，您可以这样做：

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

实际上，在将live处理程序添加到类 platform而不是ID的元素时，您的代码不应该正常工作。也许是一个错字？

假设你的元素有类而不是ID，你也可以这样做：

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

Answer 2

为什么不呢：

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

<select>已经分配了一个ID

Answer 3

怎么样：

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

只需更改下一个，我认为因为是一个ID，就不会有另一个具有相同ID的元素。

jQuery Chained选择Ajax - 需要帮助

3 个答案: