关于多个select选项不重复问题。

fsdvd 2015-06-07 10:18:59
我想做到,当select1选了“选择1”,其它select 选项就不会有“选择1”,如此类推,当select1选了“选择1”,select2选了“选择2”,其它的select 选择框就没有“选择1”和“选择2”的选项,请问如何实现。

<html>
<head>
<title>Document</title>
</head>
<body>
<p>
<select name="select1" id='select1'>
<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="select2" id='select2'>
<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="select3" id='select3'>
<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="select4" id='select4'>
<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>
</body>
</html>
...全文
492 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
遥望那些年 2015-06-07
  • 打赏
  • 举报
回复

$(document).ready(function(){
    $('select').change(function(e){
	var div=$(this).parents('div').attr('id');
        var oldvalue=$(this).attr('old');
        var currentvalue=$(this).val();
        if(oldvalue){
            $('#'+div+' select option[value='+oldvalue+']').show();
        }
 
        $('#'+div+' select option[value='+currentvalue+']').hide();
        $(this).attr('old',currentvalue);
    });
});
fsdvd 2015-06-07
  • 打赏
  • 举报
回复
引用 1 楼 gxttr 的回复:

<!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 oldvalue=$(this).attr('old');
		var currentvalue=$(this).val();
		if(oldvalue){
			$('select option[value='+oldvalue+']').show();
		}

		$('select option[value='+currentvalue+']').hide();
		$(this).attr('old',currentvalue);
	});
});
</script>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
        <script type="text/javascript" src="jquery-1.11.2.js"></script>
        <script type="text/javascript" src="m-js5-f_test01.js"></script>         
    </head>
 
<body>
 <p>
   <select name="select1" id='select1'>
     <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="select2" id='select2'>
     <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="select3" id='select3'>
     <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="select4" id='select4'>
     <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>
 </body>
</html>
实现了我想要的功能,还想问一下,如果有两组select 应该如何写呢?


<!DOCTYPE html>
<script src="js/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
	$('select').change(function(e){
		var oldvalue=$(this).attr('old');
		var currentvalue=$(this).val();
		if(oldvalue){
			$('select option[value='+oldvalue+']').show();
		}

		$('select option[value='+currentvalue+']').hide();
		$(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>

遥望那些年 2015-06-07
  • 打赏
  • 举报
回复

<!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 oldvalue=$(this).attr('old');
		var currentvalue=$(this).val();
		if(oldvalue){
			$('select option[value='+oldvalue+']').show();
		}

		$('select option[value='+currentvalue+']').hide();
		$(this).attr('old',currentvalue);
	});
});
</script>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
        <script type="text/javascript" src="jquery-1.11.2.js"></script>
        <script type="text/javascript" src="m-js5-f_test01.js"></script>         
    </head>
 
<body>
 <p>
   <select name="select1" id='select1'>
     <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="select2" id='select2'>
     <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="select3" id='select3'>
     <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="select4" id='select4'>
     <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>
 </body>
</html>

87,888

社区成员

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

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