实现多个下拉框同一批option,选中其一其他框里去除选中的项(不可选择已选过的项)--js

最新推荐文章于 2023-05-14 11:06:07 发布
最新推荐文章于 2023-05-14 11:06:07 发布
阅读量6.7k 收藏 3
点赞数 1
分类专栏： web前端 文章标签： js 下拉列表控制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014596302/article/details/51917937
版权

html


初始化  先把下拉框 satisfactionOptionTList  查出来,以便出发 选中事件

<div class="col-xs-4">                
                <button type="button" οnclick="resetSatisfaction();" class="btn btn-success btn-sm" style="background:#8EC21F;border-color:#8EC21F;">重置满意度</button>
                <p style="margin:10px 0;">
                    <span>第一满意度：</span>
                    <select class="form-control" name="firstSatisfaction" style="display:inline-block;width:70%;" id="satisfactionOptionT1" οnchange="satisfactionOptionT(this);" >
                        <option value="-1" >--请选择--</option>
                        <#if satisfactionOptionTList??>
	                        <#list satisfactionOptionTList as satisfactionOptionT>
		                        <option value="${satisfactionOptionT.typeId}" >${satisfactionOptionT.concreteValue}</option>
	                        </#list>
                        </#if>
                    </select>
                </p>
                <p style="margin:10px 0;">
                    <span>第二满意度：</span>
                    <select class="form-control" name="secondSatisfaction" style="display:inline-block;width:70%;" id="satisfactionOptionT2" οnchange="satisfactionOptionT(this);">
                        <option value="-1" >--请选择--</option>
                        <#if satisfactionOptionTList??>
	                        <#list satisfactionOptionTList as satisfactionOptionT>
		                        <option value="${satisfactionOptionT.typeId}" >${satisfactionOptionT.concreteValue}</option>
	                        </#list>
                        </#if>
                    </select>
                </p>
                <p style="margin:10px 0;">
                    <span>第三满意度：</span>
                    <select class="form-control" name="thirdlySatisfaction" style="display:inline-block;width:70%;" id="satisfactionOptionT3" οnchange="satisfactionOptionT(this);">
                        <option value="-1" >--请选择--</option>
                        <#if satisfactionOptionTList??>
	                        <#list satisfactionOptionTList as satisfactionOptionT>
		                        <option value="${satisfactionOptionT.typeId}" >${satisfactionOptionT.concreteValue}</option>
	                        </#list>
                        </#if>
                    </select>
                </p>
                <p style="margin:10px 0;">
                    <span>第四满意度：</span>
                    <select class="form-control" name="fourthlySatisfaction" style="display:inline-block;width:70%;" id="satisfactionOptionT4" οnchange="satisfactionOptionT(this);">
                        <option value="-1" >--请选择--</option>
                        <#if satisfactionOptionTList??>
	                        <#list satisfactionOptionTList as satisfactionOptionT>
		                        <option value="${satisfactionOptionT.typeId}" >${satisfactionOptionT.concreteValue}</option>
	                        </#list>
                        </#if>
                    </select>
                </p>
                <p style="margin:10px 0;">
                    <span>第五满意度：</span>
                    <select class="form-control" name="fifthSatisfaction" style="display:inline-block;width:70%;" id="satisfactionOptionT5" οnchange="satisfactionOptionT(this);">
                        <option value="-1" >--请选择--</option>
                        <#if satisfactionOptionTList??>
	                        <#list satisfactionOptionTList as satisfactionOptionT>
		                        <option value="${satisfactionOptionT.typeId}" >${satisfactionOptionT.concreteValue}</option>
	                        </#list>
                        </#if>
                    </select>
                </p>
                <p style="margin:10px 0;">
                    <span>第六满意度：</span>
                    <select class="form-control" name="sixthSatisfaction" style="display:inline-block;width:70%;" id="satisfactionOptionT6" οnchange="satisfactionOptionT(this);">
                        <option value="-1" >--请选择--</option>
                        <#if satisfactionOptionTList??>
	                        <#list satisfactionOptionTList as satisfactionOptionT>
		                        <option value="${satisfactionOptionT.typeId}" >${satisfactionOptionT.concreteValue}</option>
	                        </#list>
                        </#if>
                    </select>
                </p>
                <p style="margin:10px 0;">
                    <span>第七满意度：</span>
                    <select class="form-control" name="seventhSatisfaction" style="display:inline-block;width:70%;" id="satisfactionOptionT7" οnchange="satisfactionOptionT(this);">
                        <option value="-1" >--请选择--</option>
                        <#if satisfactionOptionTList??>
	                        <#list satisfactionOptionTList as satisfactionOptionT>
		                        <option value="${satisfactionOptionT.typeId}" >${satisfactionOptionT.concreteValue}</option>
	                        </#list>
                        </#if>
                    </select>
                </p>
            </div>

js 

function satisfactionOptionT(o){
	var num = 0;
	var array = new Array();
	if($("#satisfactionOptionT1").val() != -1){
		array[num] = parseInt($("#satisfactionOptionT1").val());
		num++;
	}
	if($("#satisfactionOptionT2").val() != -1){
		array[num] = parseInt($("#satisfactionOptionT2").val());
		num++;
	}
	if($("#satisfactionOptionT3").val() != -1){
		array[num] = parseInt($("#satisfactionOptionT3").val());
		num++;
	}
	if($("#satisfactionOptionT4").val() != -1){
		array[num] = parseInt($("#satisfactionOptionT4").val());
		num++;
	}
	if($("#satisfactionOptionT5").val() != -1){
		array[num] = parseInt($("#satisfactionOptionT5").val());
		num++;
	}
	if($("#satisfactionOptionT6").val() != -1){
		array[num] = parseInt($("#satisfactionOptionT6").val());
		num++;
	}
	if($("#satisfactionOptionT7").val() != -1){
		array[num] = parseInt($("#satisfactionOptionT7").val());
		num++;
	}
	
	$.ajax({
		url:"${huluUrl}/corp/comment/setSatisfactionOptionT?array="+array,
		type:"POST",
		success:function(obj){
			if(obj.success == true){
				//除去选中的potion 将其他的选项赋值到 剩余没有选择的满意度上
				var publicOption ='<option value="-1" >--请选择--</option>';
				var publicSelect ='';
				var select1 = '';
				var select2 = '';
				var select3 = '';
				var select4 = '';
				var select5 = '';
				var select6 = '';
				var select7 = '';
				if($("#satisfactionOptionT1").val() != -1){
					select1 +='<option value='+$("#satisfactionOptionT1").val()+' selected="selected">'+$("#satisfactionOptionT1").find("option:selected").text()+'</option>';
				}
				if($("#satisfactionOptionT2").val() != -1){
					select2 +='<option value='+$("#satisfactionOptionT2").val()+' selected="selected">'+$("#satisfactionOptionT2").find("option:selected").text()+'</option>';
				}
				if($("#satisfactionOptionT3").val() != -1){
					select3 +='<option value='+$("#satisfactionOptionT3").val()+' selected="selected">'+$("#satisfactionOptionT3").find("option:selected").text()+'</option>';
				}
				if($("#satisfactionOptionT4").val() != -1){
					select4 +='<option value='+$("#satisfactionOptionT4").val()+' selected="selected">'+$("#satisfactionOptionT4").find("option:selected").text()+'</option>';
				}
				if($("#satisfactionOptionT5").val() != -1){
					select5 +='<option value='+$("#satisfactionOptionT5").val()+' selected="selected">'+$("#satisfactionOptionT5").find("option:selected").text()+'</option>';
				}
				if($("#satisfactionOptionT6").val() != -1){
					select6 +='<option value='+$("#satisfactionOptionT6").val()+' selected="selected">'+$("#satisfactionOptionT6").find("option:selected").text()+'</option>';
				}
				if($("#satisfactionOptionT7").val() != -1){
					select7 +='<option value='+$("#satisfactionOptionT7").val()+' selected="selected">'+$("#satisfactionOptionT7").find("option:selected").text()+'</option>';
				}
				for (var i = 0; i < obj.data.length; i++) {
					// alert(obj.data[i].concreteValue);
					publicSelect +='<option value='+obj.data[i].typeId+' >'+obj.data[i].concreteValue+'</option>';
				}
				$("#satisfactionOptionT1").html(publicOption+select1+publicSelect);
				$("#satisfactionOptionT2").html(publicOption+select2+publicSelect);
				$("#satisfactionOptionT3").html(publicOption+select3+publicSelect);
				$("#satisfactionOptionT4").html(publicOption+select4+publicSelect);
				$("#satisfactionOptionT5").html(publicOption+select5+publicSelect);
				$("#satisfactionOptionT6").html(publicOption+select6+publicSelect);
				$("#satisfactionOptionT7").html(publicOption+select7+publicSelect);
			}
		},
		error:function(){
			alert("与服务器断开联系,请稍后再试!");
			parent.location.reload();	
		}
		
	})
}



java 

  //array 要过滤掉的选项
  @RequestMapping(value = "setSatisfactionOptionT",method = RequestMethod.POST)
  public @ResponseBody AjaxResult setSatisfactionOptionT(Integer[] array) {
	if(array==null || array.length ==0){
		array = new Integer[1];
		array[0] = -1;
	}
	List<Ctrl> satisfactionOptionTList = ctrlDbSvc.getCtrlSatisfactionList("satisfactionOptionT",array);
	if(satisfactionOptionTList ==null){
		return AjaxResult.createError("无数据");
	}else{
		return AjaxResult.createSuccess(satisfactionOptionTList);
	}  
  }
java: service 
public List<Ctrl> getCtrlSatisfactionList(String typeExplain,Integer[] typeIdArray){
		List<Ctrl> ctrlList = repo.getCtrlSatisfactionList(typeExplain,typeIdArray);
		return ctrlList;
	}
java :dao 

@Query("select c from Ctrl c where c.typeExplain = :typeExplain and typeId not in (:typeIdArray) ")
	List<Ctrl> getCtrlSatisfactionList(@Param("typeExplain") String typeExplain,@Param("typeIdArray")Integer[] typeIdArray);
	



配置表						
db_ctrl	流水号	id	bigint	20	Y	
	类型说明	typeExplain	varchar	255	Y	
	类型ID	typeId	smallint	11	Y	
	具体值	concreteValue	varchar	255	Y	
	对应描述	description	varchar	255		
	排序	sort	smallint	11



db 脚本-SQL

建表

/*
Navicat MySQL Data Transfer

Source Server         : hulu
Source Server Version : 50096
Source Host           : localhost:3306
Source Database       : hulu

Target Server Type    : MYSQL
Target Server Version : 50096
File Encoding         : 65001

Date: 2016-07-15 15:09:59
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `db_ctrl`
-- ----------------------------
DROP TABLE IF EXISTS `db_ctrl`;
CREATE TABLE `db_ctrl` (
  `id` bigint(20) NOT NULL auto_increment,
  `typeExplain` varchar(255) NOT NULL,
  `typeId` int(11) NOT NULL,
  `concreteValue` varchar(255) NOT NULL,
  `description` varchar(255) default NULL,
  `sort` int(11) default NULL,
  `createdAt` bigint(20) default NULL,
  `updatedAt` bigint(20) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=62 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of db_ctrl
-- ----------------------------

INSERT INTO `db_ctrl` VALUES ('45', 'satisfactionOptionT', '1', '带班态度', '满意度选项', '1', null, null);
INSERT INTO `db_ctrl` VALUES ('46', 'satisfactionOptionT', '2', '班前准备', '满意度选项', '2', null, null);
INSERT INTO `db_ctrl` VALUES ('47', 'satisfactionOptionT', '3', '安全把控', '满意度选项', '3', null, null);
INSERT INTO `db_ctrl` VALUES ('48', 'satisfactionOptionT', '4', '时间管理', '满意度选项', '4', null, null);
INSERT INTO `db_ctrl` VALUES ('49', 'satisfactionOptionT', '5', '控场能力', '满意度选项', '5', null, null);
INSERT INTO `db_ctrl` VALUES ('50', 'satisfactionOptionT', '6', '项目操作', '满意度选项', '6', null, null);
INSERT INTO `db_ctrl` VALUES ('51', 'satisfactionOptionT', '7', '引导分享', '满意度选项', '7', null, null);

效果--------------------------------------------









廿二又
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
前端学习笔记，做一个简单的网站-设置下拉框中的默认随机选中项，学习代码
06-21
在前端开发中，创建一个交互式的网站是必不可少的技能之一。本笔记主要关注如何在下拉框（Dropdown或Select）中实现默认的随机选中项功能。这在一些需要动态展示随机选择效果的场景中非常实用，比如模拟用户行为或者...
option的多value值赋值及取值等问题，例如：value（12，17796325820）
weixin_44855713的博客
05-19 2759
设想一个业务场景，选择车辆-查询车辆下的司机-将司机信息渲染出来 <option value="${value.id},${value.mobile}">-- ${value.name} --</option> 很好，可以将司机的id和司机的电话，姓名都传过来， 但是： 根据value值来判断select框哪个选中， 怎么做 你会说：parent.$('.driver').eq(i).val()，不就得了吗（我在跨页传值，所以用了parent；因为多个所以eq） 但是，并不行
JS中select框中控制下拉列表部分可选部分不可选
LM891108647的博客
01-10 5659
最近在业务需求开发中，需要对结汇资金属性的下拉选项进行控制。需求原本是要求对于不可选的属性，用户点击后默认显示请选择。修改完成后，需求又变更为还是让属性显示出来，另外在别的地方去控制流程终止。哎，对业务的需求变更是最无力吐槽了，。最疯狂的遇到过，对于一个需求一天变一次，连续改了三个版本，真是累死宝宝了。 现在给大家提供最初的需求，不可选的属性置灰，用户点击后默认回到请选择的属性。 先把html
组件Element-UI 2实现树形下拉选择框--详解（含代码&示例）
热门推荐
qq_53322872的博客
05-14 1万+
通过element-ui 2的方式实现树形下拉选择框的效果
javascript设置下拉菜单注意事项
一个真正靠自己的人才会懂得珍惜什么
08-28 2170
一个下拉菜单搞了我整整3天都没有解决，问了很多人，发了很多贴，都没有我想要的那种效果，一个是代码太多，烦琐，不知道为什么就要实现一个显示和隐藏菜单这么简单的功能都要写那么复杂。我个人是比较反感的。所以经过我几天的实践，终于把问题给解决了。主要原因是层的问题，不是javascript代码问题. //显示菜单function setDivDisplay(divName) {    var v =
js select 选中一个值，其他select不出现此值
夏安的博客
09-28 1530
  pmhtml=""; pmhtml +='&lt;option value="" selected="selected" &gt;--请选择--&lt;/option&gt;'; for(var j=0; j&lt;data[0].pm.length; j++){ pmhtml += '&lt;option value="'+data[0].pm.get(j).pm
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js+csss实现的一个带复选框的下拉框
10-25
在网页设计中，创建一个带有复选框的下拉框是一项常见的需求，它允许用户在多个选项中进行多选操作。这个例子通过结合JavaScript (js) 和层叠样式表(CSS)来实现这一功能，提供了良好的用户体验。下面将详细解释这个...
多个select下拉框,当选中当前的一项时,其他下拉选都不能选择同样的选项(下拉选的值不能相同)
一边努力一边摸鱼
06-10 1万+
发现了两个解决方法,一个是自己写的比较鸡肋 //选中的选项不能够重复(重复的选项隐藏) $(document).ready(function(){ $('#selectOption select').change(function(){ var oldValue=$(this).attr('old'); var current...
vue antdesign的下拉选项组件Select在多选场景下,控制不可选择选项的回显问题
hjww_01的博客
03-22 4859
背景 采用的是ant design 里面的select组件，多选模式，在编辑的场景下，回显已选择多选项。 要求 有些已选中的值在下拉选项里不可再选择，只能保留，或者删除该选中值。 解决方案 一开始尝试将不可选择的选项加上属性值 disabled，该项（op2）就可显示在已选选项中，但却不支持删除，不满足目的。 最终解决方案：接口中返回【所有】下拉选项，把一些不能选择的选项加上属性值 hidden，值为true，就可以该选项，又可以回显选中项的名称 解决思路来源： https://github.com/a
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
10-21
主要介绍了jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
js使select标签option为不可选
tianye_uu的专栏
11-26 3309
实现select标签的部分option为不可选有两种方法:1. 使用optgroup标签及其label属性.兼容于IE,FF.例子如下:   &lt;style type="text/css" media="all"&gt; option.readOnly {background:#ccc;color:#666;} &lt;/style&gt; &lt;select onchange="if(th...
Element UI Select选择器实现多个下拉框中的一个选择某项后其余下拉框无法选择(完善版本)
qq_41537593的博客
12-30 3443
Element UI Select下拉选择器实现多个下拉框中的一个选择某项后其余下拉框无法选择（完整demo）
select下拉框，选中当前某一项，其他下拉框去掉选中的值
wingsb的博客
01-17 3577
select下拉框，选中当前某一项，其他下拉框去掉选中的值 效果图： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script sr
多个el-select共用一个options且一个option只能用一次
chi1130的博客
10-21 3057
需求 一个表单多个下拉框，假如 options 里有中国，美国，第一个 select 选择里中国那么第二个 select 的 options 中国就置为灰色，反之我第二个选里中国，第一个 options 中中国就置为灰色 效果 DEMO 在线 demo ⛩⛽️????✈️???????????????? 代码 <template> <div> <el-form :model="rul...
多个select下拉框，选中当前某一项，其他下拉框去掉选中的值
weixin_30733003的博客
03-29 820
前两天在项目开发的时候有个需求是要求多个下拉框，选中某一项后其他下拉框移除该项，虽然写的有点绕，如果那个小伙伴有更好的例子，可以贡献下。先贴几张图看下效果 这是全部下拉框展开的效果图，具体描述看图吧，下面就开始贴代码 html部分 <div class="video_in"> <p> 下拉一 ...
Mvc框架实现在一个下拉框选中特定的那个,右边才有按钮显示,选择其他的不显示
最新发布
06-10
首先需要给下拉框绑定一个`onchange`事件，然后在事件处理函数中获取选中项的值，判断是否为特定的值，如果是则将按钮的`display`属性设置为`block`，否则设置为`none`。以下是一个简单的示例代码： HTML： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值