jQuery 更新选择列表

Question

我有一个表单，用户可以在其中提交表单来指示哪些系统需要更新。在表单中，他们可以动态地将系统添加到表单中，因此我没有可用的唯一 ID。在表单中，他们必须选择一个平台（unix、hp、wintel 等），然后选择与所选平台相匹配的相应型号 - 想想链式选择。当“item”中的第一个选定列表发生更改时，将进行 ajax 调用来获取第二个选择列表的值。如何仅针对相应的链式选择更新“项目”中的第二个选择列表？

我使用克隆方法来允许用户将项目添加到表单中。因此，该 id 在页面上不再是唯一的，因此我使用该类来确定哪个选择按钮发生了更改。它现在的工作方式是，每个第二个选择列表都会更新，我只希望与第一个选择列表相对应的选择链选择列表被更改更新。我相信 next() 是答案，但我想我的语法不正确。

第一个选择列表的类别是平台，第二个选择列表的类别是模型。

每第二个选择列表更新：$("select.model").html(options)

不更新：$("select.model").next().html （选项）;

任何帮助将不胜感激。

<div id="mySelectArea">
  <select id="myFirstOption" class="myFirstOption">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <select id="mySecondSelect" class="mySecondSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>    
  </select>
</div>

<div id="mySelectArea">
  <select id="myFirstOption" class="myFirstOption">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <select id="mySecondSelect" class="mySecondSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>    
  </select>
</div>

<script>
jQuery(document).ready(function()
    {
    $(".myFirstOption").live("change", function() {
        $.getJSON("live_getModels.cfm",{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>';
                }
        $(this).next("#mySecondSelect").html(options);      
        });
    });

});
</script>

下面是一个 JSON 结果示例，用于更准确的演示：

[{"optionValue":"", "optionDisplay":"Select Model"},{"optionValue":"TBD", "optionDisplay":"TBD"},{"optionValue":"SCCM", "optionDisplay":"SCCM-standalone"},{"optionValue":"Manual", "optionDisplay":"Manual-standalone"},{"optionValue":"SCCM-VMWare", "optionDisplay":"SCCM-VMWare"},{"optionValue":"Manual-VMWare", "optionDisplay":"Manual-VMWare"},{"optionValue":"SCCM Hybrid", "optionDisplay":"SCCM Hybrid"},{"optionValue":"SCCM Hybrid VMWare", "optionDisplay":"SCCM Hybrid VMWare"},{"optionValue":"SCCM Offline", "optionDisplay":"SCCM Offline"},{"optionValue":"SCCM Offline - VMWare", "optionDisplay":"SCCM Offline - VMWare"}]

Answer 1

如果我没看错， .next() 不起作用的原因是因为您正在选择要更新的下拉列表，然后移至下一个。如果你的（伪）html看起来像这样，

<div id="mySelectArea">
  <select id="myFirstOption">
    <option>1</option>
  </select>
  <select id="mySecondSelect">
    <option>2</option>
  </select>
</div>

并且你有第一个选择的更改事件，代码将

$(this).next("#mySecondSelect").options(html);

---

基于你的编辑，将你的javascript更改为：

jQuery(document).ready(function() {
    $(".myFirstOption").live("change", function() {
        var firstOption = $(this);
        $.getJSON("live_getModels.cfm",{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("#mySecondSelect").html(options);      
        });
    });

});

我相对确定在ajax成功函数内部 this = window，所以您必须保存对原始对象的引用。

Answer 2

为什么不让用户填写包含所有信息的表单，然后仅在最后将它们附加到列表中？

这样您就不必担心有 n 个下拉菜单。