weixin_33713503 2011-03-07 18:49 采纳率: 0%
浏览 30

jQuery更新选择列表

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"}]
  • 写回答

2条回答 默认 最新

  • weixin_33717117 2011-03-07 18:54
    关注

    Why don't you have the user fill a form with all the informations, and append them to the list only at the end?

    This way you don't have to worry about having n dropdowns around.

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名