关于多个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>
...全文
442 3 打赏 收藏 举报
写回复
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>
相关推荐
多个select下拉框,当选中当前的一项时,其他下拉选都不能选择同样的选项(下拉选的值不能相同)
发现了两个解决方法,一个是自己写的比较鸡肋 //选中的选项不能够重复(重复的选项隐藏) $(document).ready(function(){ $('#selectOption select').change(function(){ var oldValue=$(this).attr('old'); var current...
jq怎样清除html option,教你如何用jquery去除select控件重复的option选项 select option去重方法...
对于OPTION选项，如果是通过后端读取，有可能会出现多个重复项目，这样用户在选择的时候就可能存在困扰，也不美观，这里教你如何对HTML代码中的SELECT OPTION的选项进行去重方法有很多，因为JQ引用最广，所以我们这里使用jquery选择器 :contains 的方法:$(":contains(text)"); // 选取包含指定字符串的元素这样就可以选出包含重复字符串的option元素...
MySQL 联合查询与子查询--作业记录
联合查询 联合查询结果是将多个select语句的查询结果联合到一起。 可以使用union和union all关键字进行合并。 基本语法： select 语句1 union [union 选项] select 语句2 union [union 选项] select 语句n 其中union选项有两个选项可选：all（表示重复也输出）；distinct（去重，完全重复的，默认会去重） 两个表的字段一致即可。 例： select id,addrid from addr union all se.
mysql基础(24)_联合查询
联合查询 基本概念 联合查询是可合并多个相似的选择查询结果集。等同于将一个表追加到另一个表，从而实现将两个表的查询组合到一起，使用谓词为union或union all。 基本语法： select 语句 union [union 选项] select 语句; union 选项:与select选项基本一样 1、distinct：去重，去掉完全重复的数据(默认的) 2、all：保存所有的结果 mysql> select * from class1_score; +------+--------+-
iview Select 组件创建项目问题
Select组件添加项目已经存在情况下还会增加重复的 这个回车的选项不会消失，尽管下拉菜单中已经有了新添加的，若点击该选项，则会再次新建一个。 若是同步操作，则一切正常
发帖
JavaScript

8.7w+

社区成员

22.4w+

社区内容

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2015-06-07 10:18
社区公告
暂无公告