jQuery来更新选择列表 [英] jQuery to update select list

查看：125
本文介绍了jQuery来更新选择列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个表格，其中用户可以提交一个表单，表明哪些系统需要更新。在形式，他们可以动态地添加系统的形式，所以我不具有唯一的ID可用。在表单中，他们有选择陪所选平台的平台（UNIX，惠普，Wintel联盟等），然后在相应的模型 - 想链接选择。当第一个选择列表中的项发生了变化，一个Ajax调用，以获得值的第二个选择列表。如何更新第2选择列表中的项目仅适用于相应的链接选择？

我使用的是克隆的方法允许用户将项目添加到窗体。因此，ID不再是页面上独一无二的，所以我使用类找出哪些选择按钮是变化的。这是工作，现在的样子，每2选择列表更新，我只是想选择链接的选择列表中对应的第一个选择列表改更新。我相信，下一个（）的答案，但我想我的语法不正确。

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

更新每2选择列表：$（select.model）HTML（选项）

没有更新：$（select.model）下一个（）HTML（选件）;

任何帮助将是AP preciated。

 ＆LT; D​​IV ID =mySelectArea＆GT;
  ＆LT;选择ID =myFirstOption级=myFirstOption＆GT;
    ＆LT;选项＆GT; 1＆LT; /选项＆GT;
    ＆LT;选项→2＆LT; /选项＆GT;
    ＆LT;选项＆GT;第3版; /选项＆GT;
  ＆LT; /选择＆GT;
  ＆LT;选择ID =mySecondSelect级=mySecondSelect＆GT;
    ＆LT;选项＆GT; 1＆LT; /选项＆GT;
    ＆LT;选项→2＆LT; /选项＆GT;
    ＆LT;选项＆GT;第3版; /选项＆GT;
  ＆LT; /选择＆GT;
＆LT; / DIV＆GT;

＆LT; D​​IV ID =mySelectArea＆GT;
  ＆LT;选择ID =myFirstOption级=myFirstOption＆GT;
    ＆LT;选项＆GT; 1＆LT; /选项＆GT;
    ＆LT;选项→2＆LT; /选项＆GT;
    ＆LT;选项＆GT;第3版; /选项＆GT;
  ＆LT; /选择＆GT;
  ＆LT;选择ID =mySecondSelect级=mySecondSelect＆GT;
    ＆LT;选项＆GT; 1＆LT; /选项＆GT;
    ＆LT;选项→2＆LT; /选项＆GT;
    ＆LT;选项＆GT;第3版; /选项＆GT;
  ＆LT; /选择＆GT;
＆LT; / DIV＆GT;

＆LT;脚本＆GT;
jQuery的（文件）。就绪（函数（）
    {
    $（myFirstOption）。生活（变，函数（）{
        $ .getJSON（live_getModels.cfm，{平台：$（本）.VAL（）}，
        函数（J）{
            VAR的选择='';
            对于（VAR I = 0; I＆LT; j.length;我++）
                {
                    选项​​+ ='＆LT;期权价值=+ J [I] .optionValue +'＆GT; + j的[I] .optionDisplay +'＆LT; /选项＆GT;';
                }
        $（本）。接下来（＃mySecondSelect）HTML（选项）。
        }）;
    }）;

}）;
＆LT; / SCRIPT＆GT;

这里是一个样本JSON结果更精确演示：

  [{optionValue：，optionDisplay：选择模型}，{optionValue：待定，optionDisplay：TBD}，{ optionValue：川音，optionDisplay：SCCM，独立的}，{optionValue：手动，optionDisplay：手动独立}，{optionValue：SCCM与VMware optionDisplay：SCCM与VMware的}，{optionValue：手动VMWare的，optionDisplay：手动VMWare的}，{optionValue：SCCM混合动力，optionDisplay：SCCM混合}，{optionValue：SCCM杂交VMWare的，optionDisplay：SCCM杂交VMWare的}，{optionValue：SCCM离线，optionDisplay：SCCM离线}，{optionValue： SCCM离线 -  VMWare的，optionDisplay：SCCM离线 -  VMWare的}]

解决方案

如果我读正确的，其原因。接下来（）不工作是因为你选择你想要更新的下拉列表，然后移动到下一个。如果你的（伪）HTML看起来像这样

 ＆LT; D​​IV ID =mySelectArea＆GT;
  ＆LT;选择ID =myFirstOption＆GT;
    ＆LT;选项＆GT; 1＆LT; /选项＆GT;
  ＆LT; /选择＆GT;
  ＆LT;选择ID =mySecondSelect＆GT;
    ＆LT;选项→2＆LT; /选项＆GT;
  ＆LT; /选择＆GT;
＆LT; / DIV＆GT;

和你的第一个变化事件选择code会

  $（本）。接下来（＃mySecondSelect）选项（HTML）。

根据您的编辑

，改变你的JavaScript这样的：

  jQuery的（文件）。就绪（函数（）{
    $（myFirstOption）。生活（变，函数（）{
        VAR firstOption = $（本）;
        $ .getJSON（live_getModels.cfm，{平台：$（本）.VAL（）}，
        函数（J）{
            VAR的选择='';
            对于（VAR I = 0; I＆LT; j.length;我++）{
                选项​​+ ='＆LT;期权价值=+ J [I] .optionValue +'＆GT; + j的[I] .optionDisplay +'＆LT; /选项＆GT;';
            }
            firstOption.next（＃mySecondSelect）HTML（选项）。
        }）;
    }）;

}）;

我是比较确定的ajax成功函数此=窗口里面，所以你必须保存一个引用原始对象。

I have a form where a user can submit a form to indicate which systems need to be updated. In the form, they can dynamically add systems to the form so I do not have unique ids available. In the form, they have to select a platform (unix, hp, wintel, etc) and then the corresponding model to accompany the selected platform - think chained select. When the first selected list in an "item" is changed, an ajax call is made to obtain the values for the 2nd select list. How can I update the 2nd select list in the "item" only for the corresponding chained select?

I'm using the clone method to allow users to add items to the form. As such, the id is no longer unique on the page so I'm using the class to figure out which select button was change. The way it is working right now, every 2nd select list is updated and I only want the select chained select list corresponding to the 1st select list changed updated. I believe next() is the answer but I guess my syntax is incorrect.

The class of the 1st select list is platform and the 2nd one is model.

updates every 2nd select list: $("select.model").html(options)

nothing updates: $("select.model").next().html(options);

Any help would be appreciated.

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

And here is a sample JSON results for more accurate demo:

[{"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"}]

解决方案

if i'm reading right, the reason .next() is not working is because you're selecting the dropdown you want to update and then moving to the next one. if your (pseudo)html looks like this

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

and you have a change event of the first select the code would be

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

based on your edit, change your javascript to this:

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);      
        });
    });

});

i'm relatively sure inside of the ajax success function this = window, so you have to save a reference to the original object.

这篇关于jQuery来更新选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆