标签：style blog color io 数据 问题 ar cti
最近再做一个新的东西，有一个需求是这样的，后台给过来一批数据，这批数据要放到三个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了，测试没有问题浏览器兼容的。哎，看来是自己知道的太少，急需积累啊
标签：style blog color io 数据 问题 ar cti
原文地址：http://www.cnblogs.com/xizai/p/3894377.html
