白日梦想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条)

报告相同问题？

提交

相关推荐 更多相似问题