现在的JS代码不兼容IE6,IE8,现在要求:兼容IE6,IE8

fsdvd 2015-06-12 05:25:41
代码实现如下功能。
1、当“组1” <select name="B1other1_1" id='B1other1_1' >选了“选择1”,其它select 选项就不会有“选择1”。如此类推,当“组1” <select name="B1other1_1" id='B1other1_1' >选了“选择1”,<select name="B1other2_1" id='B1other2_1' >选了“选择2”,其它的select 选择框就没有“选择1”和“选择2”的选项,每组间“组1”和“组2”互不影响。


现在的JS代码不兼容IE6,IE8,现在要求:兼容IE6,IE8,那位高手帮帮忙。


<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>问卷</title>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('select').change(function(e){
var div=$(this).parents('div').attr('id');
var oldvalue=$(this).attr('old');
var currentvalue=$(this).val();
var checkText=$(this).find("option:selected").text();
if(oldvalue){
$('#'+div+' select option[value='+oldvalue+']').show();
}

$('#'+div+' select option[value='+currentvalue+']').hide();
$(this).attr('old',currentvalue);
});
});
</script>

</head>
<body>
<p>我想实现:<br />
<br />
<br />
<br />
现在的代码不兼容IE6,IE8,现在要求:兼容IE6,IE8</p>
<p> </p>
<p>组1 </p>
<div id="B1">
<p>
<select name="B1other1_1" id='B1other1_1' >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>其它</option>
</select>

<input type="text" name="B1other1_2" id="B1other1_2" />
</p>
<p>
<select name="B1other2_1" id='B1other2_1' >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>其它</option>
</select>
<input type="text" name="B1other2_2" id="B1other2_2" />
</p>
<p>
<select name="B1other3_1" id='B1other3_1' >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>其它</option>
</select>
<input type="text" name="B1other3_2" id="B1other3_2" />
</p>
<p>
<select name="B1other4_1" id='B1other4_1' >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>其它</option>
</select>
<input type="text" name="B1other4_2" id="B1other4_2" />
</p>
</div>
组2
<div id="B2">
<p>
<select name="B2other1_1" id='B2other1_1' >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>选择4</option>
<option value='5'>其它</option>
</select>

<input type="text" name="B2other1_2" id="B2other1_2" />
</p>
<p>
<select name="B2other2_1" id="B2other2_1" >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>选择4</option>
<option value='5'>其它</option>
</select>
<input type="text" name="B2other2_2" id="B2other2_2" />
</p>
<p>
<select name="B2other3_1" id='B2other3_1' >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>选择4</option>
<option value='5'>其它</option>
</select>
<input type="text" name="B2other3_2" id="B2other3_2" />
</p>
<p>
<select name="B2other4_1" id='B2other4_1' >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>选择4</option>
<option value='5'>其它</option>
</select>
<input type="text" name="B2other4_2" id="B2other4_2" />
</p>
<p>
<select name="B2other5_1" id='B2other5_1' >
<option value=''>请选择</option>
<option value='1'>选择1</option>
<option value='2'>选择2</option>
<option value='3'>选择3</option>
<option value='4'>选择4</option>
<option value='5'>其它</option>
</select>
<input type="text" name="B2other5_2" id="B2other5_2" />
</p>
</div>
</body>
</html>


...全文
236 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
遥望那些年 2015-06-14
  • 打赏
  • 举报
回复
楼上大神问个问题,为啥我对option做wrap('<other></other>')操作后 $(this).val()会取值不正确,只能用$(this).find('option:checked').val()来进行取值?
scscms太阳光 2015-06-14
  • 打赏
  • 举报
回复
引用 4 楼 gxttr 的回复:
楼上大神问个问题,为啥我对option做wrap('<other></other>')操作后 $(this).val()会取值不正确,只能用$(this).find('option:checked').val()来进行取值?
跟wrap没关,是jQuery兼容问题。
爱花的石头 2015-06-14
  • 打赏
  • 举报
回复
如果想考虑兼容性,建议不要用jquery等js框架,使用最基础的js比较可靠,功能也能控制, 使用jquery后,实际上是封装了一下,兼容性的问题不太好修改。
scscms太阳光 2015-06-13
  • 打赏
  • 举报
回复
楼上的写法基本已经符合条件,但仍有问题。比如第一个选择任意一个选项,然后马上又选择“请选择”,那么同组其他select就默认全部选择了“选择1”,这明显是一个bug.
<script>
    $(document).ready(function(){
        $('select').change(function(e){
            var _this = $(this),v = $("option:checked",_this).val(),oldv = _this.data("oldv"),ps = _this.closest("p").siblings();
            v && ps.find("option[value='"+ v +"']").wrap("<hide>");
            oldv && ps.find("option[value='"+ oldv +"']").unwrap();
            _this.data("oldv",v);
        });
    });
</script>
遥望那些年 2015-06-12
  • 打赏
  • 举报
回复

<!DOCTYPE html>
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superplus/js/lib/jquery-1.10.2_d88366fd.js"></script>
<script>
$(document).ready(function(){
    $('select').change(function(e){
        var div=$(this).parents('div').attr('id');
        var oldvalue=$(this).attr('old');
        var currentvalue=$(this).find('option:checked').val();
	var id=$(this).attr('id');
        if(oldvalue){
            $('#'+div+' select').not('#'+id).find('option[value='+oldvalue+']').unwrap();
        }
  
        $('#'+div+' select').not('#'+id).find('option[value='+currentvalue+']').wrap('<other></other>');
        $(this).attr('old',currentvalue);
    });
});
</script>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
    </head>
  
<body>
<div id="a1">
 <p>
   <select name="a1select1" id='a1select1'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
     
 </p>
 <p>
   <select name="a1select2" id='a1select2'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
 </p>
 <p>
   <select name="a1select3" id='a1select3'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
 </p>
 <p>
   <select name="a1select4" id='a1select4'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
 </p>
  <p>
   <select name="a1select5" id='a1select5'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
 </p>
 </div>
 <div id="A2">
 <p>
   <select name="A2select1" id='A2select1'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
     
 </p>
 <p>
   <select name="A2select2" id='A2select2'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
 </p>
 <p>
   <select name="A2select3" id='A2select3'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
 </p>
 <p>
   <select name="A2select4" id='A2select4'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
 </p>
  <p>
   <select name="A2select5" id='A2select5'>
     <option value=''>请选择</option>   
     <option value='1'>选择1</option>
     <option value='2'>选择2</option>
     <option value='3'>选择3</option>
     <option value='4'>选择4</option>
     <option value='5'>选择5</option>
   </select>
 </p>
 </div>
 </body>
</html>
把之前给你的代码改了下了。测试下来ie8应该没啥问题,ie6没模拟
香蕉猪 2015-06-12
  • 打赏
  • 举报
回复
网上有兼容的js插件,,,楼主去找找???

87,839

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧