jQuery更新选择列表

Posted 2023-02-25

【中文标题】jQuery更新选择列表

【英文标题】：jQuery to update select list

【发布时间】：2011-03-07 18:49:38

【问题描述】：

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

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

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

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

没有更新：$("select.model").next().html(options);

任何帮助将不胜感激。

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

【参考方案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里面，所以你必须保存对原始对象的引用。

【讨论】：

我去看看能不能用更多代码更新我原来的帖子。

天啊，我在 ajax 调用中完全忘记了 this=window！那成功了。感谢内森对我发布错误的耐心。我真的很感激！我没有足够的声誉点来单击向上箭头，所以如果其他人偶然发现这篇文章，原始代码和 nathan 提供的答案确实适用于 jQuery 1.4.3。

@Nathan，如果你还在监视这个线程，我遇到了问题。只要两个选择并排（它们之间没有任何其他标签），就可以完美地工作。但是，如果它们之间有任何 html 标签，则第二个选择不会更新。根据我的阅读，我唯一能想到的是 .next() 不是最好的选择，也许 .find() 可能会更好？

@dlackey，find() 不会是你想要的，因为它会找到子元素。我很惊讶 .next('selector') 尽管有 html 标签却无法正常工作。如果还有其他问题，请尝试 .siblings('selector')。

【参考方案2】：

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

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

【讨论】：

这是要求的一部分，并且正在更新的系统可能会达到 100 个，并且用户难以管理。