关于多个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>
...全文
508 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>
python搞定sass项目_07_问题管理
全套视频是基于django开发的Bug管理平台，为用户提供理想的工作云平台，涵盖了众多企业级功能，便捷的团队协作，轻量的项目管理， 完备的问题系统，大容量的文件存储等，大大提升了工作效率。项目涵盖技术和知识点概览：1. 注册、登录、手机短信、图片验证码、redis超时 等企业用户认证。2. git版本控制、local_settings配置管理、virtualenv虚拟环境。3. ModelForm扩展核心应用 & 自定义widget插件 & OOP多继承实现BootStrap应用。4. django离线脚本处理。5. 腾讯对象存储COS应用及文件多级目录控制。6. wiki平台和markdown组件定制。7. 生成器和可迭代对象的应用并实现组合搜索。8. 集成多个插件 datetimepicker.js /  select2 / daterangepicker.js / highcharts / bootstrap-select.js。9. 支付宝支付 和 优惠抵扣。学完本课，你可以掌握用Django开发企业级web应用的技能
Vue: 多个el-select不能重复选择相同属性
Vue2: 多个el-select不能重复选择相同属性
Vue 多个select 不能重复选择相同属性的数据
第二种 , 根据当前选择的属性 , 去禁用相同属性的选项 ,意思就是相同属性的选项不可重复选择 效果演示 去除或者禁用 都是一样的道理 改一行代码就行, 这里不细说 ,直接贴代码吧 <template> <div id="app"> <div v-for="(item, index) in selectList" :key="index"> <el-select v-model="item.value" st
Vue 多个select 不能重复选择相同value的数据
开发过程经常会碰到多个Select同样的选项,选择后其他select不能继续选择,整合了两种类别的需求呈现方式 第一种，不能重复选择相同value的数据，选择后其他select移出该项 前言 1.功能的实现是基于vue的计算属性computed 2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算属性return的值可以保证相对独立，又可以在其依赖的属性的值发生变化时进行重新计算。 3.是偶然间想到用计算属性来完成这个功能，怕自己忘了所以写在博客这里当总结，同时也希望笔者的想法能给大
Vue 实现动态循环出的多个select 不能重复选择相同的数据
Vue 实现动态循环出的多个select 不能重复选择相同的数据前言效果图演示实现逻辑代码总结 前言 1.本篇文章功能的实现是基于vue的计算属性computed 2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算属性return的值可以保证相对独立，又可以在其依赖的属性的值发生变化时进行重新计算。 3.是偶然间想到用计算属性来完成这个功能，怕自己忘了所以写在博客这里当总...
JavaScript

87,955

社区成员

224,621

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章