html

初始化 ?先把下拉框 satisfactionOptionTList ?查出來,以便出發(fā) 選中事件

<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("與服務器斷開聯(lián)系,請稍后再試!");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("無數(shù)據(jù)");}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 TransferSource Server : hulu Source Server Version : 50096 Source Host : localhost:3306 Source Database : huluTarget Server Type : MYSQL Target Server Version : 50096 File 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', '帶班態(tài)度', '滿意度選項', '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);
效果--------------------------------------------

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的实现多个下拉框同一批option,选中其一其他框里去除选中的项(不可选择已选过的项)--js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。