jQuery更新选择列表

jtoj6r0c 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(84)

我有一个表单，用户可以在其中提交一个表单来指示哪些系统需要更新。在表单中，他们可以动态地将系统添加到表单中，因此我没有唯一的ID可用。在表单中，他们必须选择一个平台（unix，hp，wintel等），然后相应的模型伴随所选的平台-想想chained select。当一个“项”中的第一个选择列表被改变时，会进行一个 AJAX 调用来获取第二个选择列表的值。我怎样才能只为相应的链式选择更新“项目”中的第二个选择列表？
我使用clone方法来允许用户向表单中添加项。因此，id在页面上不再是唯一的，所以我使用类来找出哪个选择按钮被更改了。它现在的工作方式，每第二个选择列表更新，我只希望选择链接的选择列表对应的第一个选择列表改变更新。我相信next（）是答案，但我想我的语法是不正确的。
第一个选择列表的类别为平台，第二个选择列表的类别为型号。

每两个选择列表更新一次：$（“select.model”）.html（选项）
无更新：$（“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"}]

jquery

来源：https://stackoverflow.com/questions/5223777/jquery-to-update-select-list

2条答案

按热度按时间

vfwfrxfs1#

如果我没阅读的话，.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里面，所以你必须保存一个对原始对象的引用。

赞(0）回复(0）举报 2023-06-22

elcex8rz2#

你为什么不让用户填写一个表格，所有的信息，并将它们附加到列表的最后？
这样你就不必担心有 n 下拉菜单。

赞(0）回复(0）举报 2023-06-22