首页 > 代码库 > select的option

select的option

2024-07-16 01:48:13   214人阅读

最近再做一个新的东西，有一个需求是这样的，后台给过来一批数据，这批数据要放到三个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了，测试没有问题浏览器兼容的。哎，看来是自己知道的太少，急需积累啊

 


联系
我们