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

Question

 例如：
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

Answer 1

之前答案有朋友支出有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>