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

来源：互联网发布：linux ssh安装编辑：程序博客网时间：2024/05/21 17:13

html

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

<div class="col-xs-4">                                <button type="button" onclick="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" onchange="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" onchange="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" onchange="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" onchange="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" onchange="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" onchange="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" onchange="satisfactionOptionT(this);">                        <option value="-1" >--请选择--</option>                        <#if satisfactionOptionTList??>                        <#list satisfactionOptionTList as satisfactionOptionT>                        <option value="${satisfactionOptionT.typeId}" >${satisfactionOptionT.concreteValue}</option>                        </#list>                        </#if>                    </select>                </p>            </div>

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流水号idbigint20Y类型说明typeExplainvarchar255Y类型IDtypeIdsmallint11Y具体值concreteValuevarchar255Y对应描述descriptionvarchar255排序sortsmallint11

db 脚本-SQL

建表

/*Navicat MySQL Data TransferSource Server         : huluSource Server Version : 50096Source Host           : localhost:3306Source Database       : huluTarget Server Type    : MYSQLTarget Server Version : 50096File Encoding         : 65001Date: 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 0