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
之前答案有朋友支出有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>
选中后触发一个事件来修改option集合
A
B
C
D
function change(){ alert( $("select option:selected").val()); $("select option").removeAttr("disabled"); $("select option:selected").attr("disabled","disabled"); }
<script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var options=["A","B","C","D"];
$("#s1").change(function(){
var value1=$(this).children('option:selected').val();
$("#s2").html('');//清空s2，过滤掉s1选择的值，重新给s2赋值
for(var i=0;i<options.length;i++){
if(options[i]!=value1){
$("#s2").append(' <option>'+options[i]+'</option>');
}
}
})
//以此类推即可
})
</script>
<select style="width:100px" id="s1" name="ft">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<select style="width:100px" id="s2">
</select>
怎么长这样，我还是截代码图片上传吧
如果楼主只是要那个效果可以看看这个代码，
代码基于jquery的。
<select name="ft" id="se">
<option value="" selected disabled>请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<script>
var $select = $('#se');
$select.on('change',function(){
var $self = $(this);
$(this).find('option').show().each(function(){
if($(this).val() === $self.val()){
$(this).hide();
}
})
})
</script>
如果想动态修改dom，就在change事件的时候创建dom元素，然后innerHTML或者appendChild到select元素中就行。
好吧，上面理解错了题。这个才是真的回答哈。
有点投机，没有删除dom，只是把多余的隐藏。
好处就是，只要第一个select写好了值，随便多少，后面都能正确适配。
<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(){
arr.push($(this).val());
dom.eq(index).html($(this).html()).find('option').each(function(){
for(var i = 0;i<arr.length;i++){
if($(this).val() === arr[i]){
$(this).hide();
}
}
})
});
if(index < $select.length){
se(dom,index);
}
}
se($select,0);
</script>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select name="ft" id="se">
<option value="" selected disabled>请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select name="ft" id="se1" style="display:none;">
<option value="" selected disabled>请选择</option>
</select>
<select name="ft" id="se2" style="display:none;">
<option value="" selected disabled>请选择</option>
</select>
<select name="ft" id="se3" style="display:none;">
<option value="" selected disabled>请选择</option>
</select>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script>
var $select = $('#se');
$select.on('change',function(){
$('#se3').css('display','none');
$('#se2').css('display','none');
$('#se1').css('display','inline-block');
$('#se1').html('');
var $self = $(this);
$(this).find('option').show().each(function(){
if($(this).val()===$self.val()){
//什么也不做
}else{
if($(this).val()!='')
$('#se1').append(' <option value='+$(this).val()+'>'+$(this).val()+'</option>');
}
})
})
$('#se1').on('change',function(){
$('#se3').css('display','none');
$('#se2').css('display','inline-block');
$('#se2').html('');
var $self = $(this);
$(this).find('option').show().each(function(){
if($(this).val()===$self.val()){
//什么也不做
}else{
if($(this).val()!='')
$('#se2').append(' <option value='+$(this).val()+'>'+$(this).val()+'</option>');
}
})
})
$('#se2').on('change',function(){
$('#se3').css('display','inline-block');
$('#se3').html('');
var $self = $(this);
$(this).find('option').show().each(function(){
if($(this).val()===$self.val()){
//什么也不做
}else{
if($(this).val()!='')
$('#se3').append(' <option value='+$(this).val()+'>'+$(this).val()+'</option>');
}
})
})
</script>
</body>
</html>