白日梦想jun
2017-07-12 12:04
采纳率: 58.7%
浏览 1.5k
已采纳

select的option元素怎么动态加载呢

 例如:
option = ["A","B","C","D"];
共四个select,每一个都是下面的结构,option用动态加载
<select  name="ft">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>
当第一个select选中A后,下一个要选择的select点开后只有B,C,D;依次类推。怎么实现呢?可以用jq
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

8条回答 默认 最新

  • white_g 2017-07-13 04:49
    最佳回答

    之前答案有朋友支出有bug,这里改一下。

    <select style="width:100px"  id="s1" class="s"  name="ft">
        <option value="" disabled selected>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <select style="width:100px"   id="s2" class="s">
        <option value="" disabled selected>请选择</option>
    </select>
    <select style="width:100px"   id="s3" class="s">
        <option value="" disabled selected>请选择</option>
    </select>
    <select style="width:100px"   id="s4" class="s">
        <option value="" disabled selected>请选择</option>
    </select>
    <script>
        var arr = [];
        var $select = $('.s');
        var index = 0;
        function se(dom,index){
            dom.eq(index++).on('change',function(){
                for(var i = index;i<dom.length;i++){
                    dom.eq(i).html('<option value="" disabled selected>请选择</option>');
                }
                arr[$(this).index()] = $(this).val();
                dom.eq(index).html($(this).html()).find('option').each(function(){
                    var l = $(this).parent().index();
                    for(var i = 0;i<l;i++){
                        if($(this).val() === arr[i]){
                            $(this).hide();
                        }
                    }
                })
            });
            if(index < dom.length){
                se(dom,index);
            }
        }
        se($select,0);
    </script> 
    
    评论
    解决 无用
    打赏 举报
查看更多回答(7条)

相关推荐 更多相似问题