最近再做一个新的东西，有一个需求是这样的，后台给过来一批数据，这批数据要放到三个select里面，提供选择；但是第一个选框选过的内容后面就不能再选了，可以隐藏，可以置灰，可以移除。。。。。。。。。

最初选择了隐藏的方法，思路是在change事件的时候先让所有的选项全部显示，然后得到另外两个select里面选中的value值，然后隐藏，把最新的也从option里面隐藏，实现方式如

　　　　$select.change(function(){
            //获取当前选中的选项
            var seloption = $(this).find('option:selected').attr('data-index'),
                $other_select = $('select.sel-question').not($(this)),
                index1,index2;
            //显示所有的dom结构
            $('option',$select).show();
            //拿到另外两个框里面选中的
            index1 = $other_select.eq(0).find('option:selected').attr('data-index');
            index2 = $other_select.eq(1).find('option:selected').attr('data-index');
            //如果另外的第一个框里面有值，隐藏这个值的dom结构
            if(index1 > 0){
                $('option.option'+ index1 +'').hide();
            }
            if(index2 > 0){
                $('option.option'+ index2 +'').hide();
            }
            //删除选中的dom结构
      　　　 $('option.option'+ seloption +'').hide();
　　　　});

但是测试结果是谷歌ok，火狐ok，ie就挂掉了。这是为什么呢？测试原来display：none；在这里不兼容，可是文字颜色可以改变，不然用font-size:0;这个策略？不行！问问度娘吧，原来如此，改成置灰，实现思路一致不过就是改变一下写法，改写成下面这样

$select.change(function(){
	//获取当前选中的选项
	var seloption = $(this).find('option:selected').attr('data-index'),
		$other_select = $('select.sel-question').not($(this)),
		index1,index2;
	//显示所有的dom结构
	$('option',$select).attr('disabled',false);
	//拿到另外两个框里面选中的
	index1 = $other_select.eq(0).find('option:selected').attr('data-index');
	index2 = $other_select.eq(1).find('option:selected').attr('data-index');
	//如果另外的第一个框里面有值，隐藏这个值的dom结构
	if(index1 > 0){
		$('option.option'+ index1 +'').attr('disabled','disabled');
	}
	if(index2 > 0){
		$('option.option'+ index2 +'').attr('disabled','disabled');
	}
	//删除选中的dom结构
	$('option.option'+ seloption +'').attr('disabled','disabled');
});

　　突然ie6是怎么了？抢救吧，原来ie6不能兼容option的disabled属性，怎么办？度娘。。。。。。。。。。。。。。。看到一篇博客原地址：http://blog.csdn.net/aoxida/article/details/8657915

window.onload = function() {   
  if (document.getElementsByTagName) {   
    var s = document.getElementsByTagName("select");   
  
    if (s.length > 0) {   
      window.select_current = new Array();   
  
      for (var i=0, select; select = s[i]; i++) {   
        select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }   
        select.onchange = function(){ restore(this); }   
        emulate(select);   
      }   
    }   
  }   
}   
  
function restore(e) {   
  if (e.options[e.selectedIndex].disabled) {   
    e.selectedIndex = window.select_current[e.id];   
  }   
}   
 
function emulate(e) {   
  for (var i=0, option; option = e.options[i]; i++) {   
    if (option.disabled) {   
      option.style.color = "#999";  
    }   
    else {   
      option.style.color = "#000";   
    }   
  }   
}

　　加上这个ok了，原理是select获得焦点时，记录之前的值，onchange后select值归位；可是。。。。。为什么会把上面选中的值也给置灰呢？这个虽然不影响功能，但是未免太丑了！想办法。。。。可以模拟disable，我们点选的时候给他把这一项置灰，然后再选他的时候直接return，试试吧

$select.change(function(){
	var is_execute = $(this).find('option:selected').attr('data-fn');
	if(is_execute == 'fn') {
		$(this).val('请选择问题');
		return;
	}
	//获取当前选中的选项
	var seloption = $(this).find('option:selected').attr('data-index'),
	$other_select = $('select.sel-question').not($(this)),
	index1,index2;
	//所有的option都变成黑色，attr的值改变
	$('option',$select).removeClass('del').attr('data-fn','');
	//拿到另外两个框里面选中的
	index1 = $other_select.eq(0).find('option:selected').attr('data-index');
	index2 = $other_select.eq(1).find('option:selected').attr('data-index');
	//如果另外的框里面有值，置灰这个选项
	function dis(tar){
		tar.addClass('del').attr('data-fn','fn');
	}
	if(index1 > 0){
		dis($('option.option'+ index1 +''));
	}
	if(index2 > 0){
		dis($('option.option'+ index2 +''));
	}
	//删除选中的dom结构
		dis($('option.option'+ seloption +''));

		$select.find('option:selected').css('color','#000');
	});
}

 终于没有问题了，各位大神有什么好想法，提出来给小菜鸟借鉴借鉴吧