select的option

最近再做一个新的东西，有一个需求是这样的，后台给过来一批数据，这批数据要放到三个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就挂掉了。这是为什么呢？度娘告诉我select的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).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‘);
});

　　这下ok了，测试没有问题浏览器兼容的。哎，看来是自己知道的太少，急需积累啊

select的option