[存代码]限制多下拉列表选择项

最新推荐文章于 2021-08-05 20:33:42 发布

fengxue_love

最新推荐文章于 2021-08-05 20:33:42 发布

阅读量449

点赞数

分类专栏： javascript & jQuery

本文链接：https://blog.csdn.net/fengxue_love/article/details/51822099

版权

javascript & jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下拉列表只能显示未被选择过的选择项，new Map()见另外一篇文章:javascript定义Map

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../common/include.jsp" %>

<html lang="zh-CN">
<head>
<%@include file="../common/incplug.jsp" %>
<script type="text/javascript" src="${ctx }/static/js/map.js"></script>
<title>添加运单</title>
<script type="text/javascript">
	var data ='${breedList }';
	var obj = eval("("+data+")");
	//存放所有品类
	var allMap = new Map();
	//unSelecteMap尚未被选择的品类 
	var unSelecteMap = new Map();
	
	$.each(obj,function(i,item){ 
		allMap.put(item.id+"", item.name);
		unSelecteMap.put(item.id+"", item.name);
	});
	

	var preValue="";//用于存放即将改变值的select的前值
	
	function ready(){
		$(".breedSelect").change(function(){
	 		var seleVal=$(this).val();
			if(seleVal!=""){
				$(".breedSelect").not(this).find("option[value="+seleVal+"]").remove();
				unSelecteMap.remove(seleVal);
			}
			if(preValue!=""){
				var option='<option value="'+preValue+'">'+allMap.get(preValue)+'</option>';
				$(".breedSelect").not(this).append(option);
				unSelecteMap.put(preValue,allMap.get(preValue));
			}
		});
		
		$(".breedSelect").click(function(){
			preValue=$(this).val();
		}); 
	}
	var trCount=1;
	function deleteTr(obj){
		var selekey=$(obj).parent().parent().find("select").val();
		unSelecteMap.put(selekey,allMap.get(selekey));
		
		var option='<option value="'+selekey+'">'+allMap.get(selekey)+'</option>';
		$(".breedSelect").not(obj).append(option);
		
		$(obj).parent().parent().remove();
		
		trCount--;
	}
	
	function addTr(){
		if(trCount>=allMap.size()){
			layer.alert('添加超出品种总数', {
	            skin: 'layui-layer-lan', //样式类名
	            closeBtn: 0
	      	});
			return ;
		}
		var appendStr='<tr><td><span class="select-box"><select class="select breedSelect" size="1" datatype="*"><option value="">--选择品种--</option>';
		var op=unSelecteMap.keys(); 	
		for(var i=0;i<op.length;i++){ 
	    	var option='<option value="'+op[i]+'">'+unSelecteMap.get(op[i])+'</option>';
	    	appendStr+=option;
		} 	
		appendStr+='</select></span></td><td><input type="text" class="input-text" name="wei" datatype="/^[1-9]+\\d*\.?\\d{0,4}$/"></td>';	  	
		appendStr+='<td><input type="text" class="input-text" name="num" datatype="*" ></td>';
		appendStr+='<td><a href="javascript:void(0);"  class="btn btn-primary size-S" οnclick="deleteTr(this);">删除</a></td></tr>';	
		$("#dataTable").append(appendStr);
		
		ready();
		trCount++;
	}
	$(function(){
		
		var arr=unSelecteMap.keys(); 
		
		//将未被选择的品类添加到select选项中
	    for(var i=0;i<arr.length;i++){ 
	    	
	    	var option='<option value="'+arr[i]+'">'+unSelecteMap.get(arr[i])+'</option>';
	        $(".breedSelect").append(option);
		} 
	 	ready();
	});
</script>
</head>
<body>
<div class="pd-20">
  <form action="${ctx }/waybill/saveWaybill" method="post" class="form form-horizontal" id="form-member-add">    
    <div class="row cl">
      <label class="form-label col-3"><span class="c-red">*</span>运送时间：</label>
      <div class="formControls col-5">
       	<input type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" name="sentDate" class="input-text Wdate" datatype="*">
	  </div>
      <div class="col-4"> </div>
    </div>
   
	<div class="row cl">
		 <label class="form-label col-3"><span class="c-red">*</span>配送物品：</label>
		<div class="formControls col-5">
			 <span class="btn-upload form-group">
			<a href="javascript:void(0);" class="btn btn-primary radius" οnclick="addTr();" ><i class="Hui-iconfont"></i> 添加物品</a>
			</span> 
		 </div>
	</div>
		<input type="hidden" id="breedDatas" name="breedDatas">
		<div class="row cl">
			<label class="form-label col-3"></label>
			<div class="formControls col-8">
				<table class="table table-border table-bg table-bordered" id="dataTable">
				 	<tr>
				 		<th width="120">配送品种</th>
				 		<th>物品重量（公斤）</th>
				 		<th>交易凭证号</th>
				 		<th>操作</th>
				 	</tr>
				 	<tr>
				 		<td>
				 			<span class="select-box">
							  <select class="select breedSelect" size="1" datatype="*">
							  	<option value="">--选择品种--</option>
							  </select>
							</span>
				 		</td>
				 		<td><input type="text" class="input-text" name="wei" datatype="/^[1-9]+\d*\.?\d{0,4}$/"></td>
				 		<td><input type="text" class="input-text" name="num" datatype="*"></td>
				 		<td> <a href="javascript:void(0);"  class="btn disabled btn-default size-S">删除</a> </td>
				 	</tr>
				 	
				</table>
			</div>
		
	</div>
    <div class="row cl">
      <div class="col-9 col-offset-3">
        <input class="btn btn-primary radius" type="submit" value="  提交  ">
      </div>
    </div>
  </form>
</div>
</div>
<script type="text/javascript">
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-member-add").Validform({
		tiptype:2,
		callback:function(form){
			var datas="";
			$("#dataTable").find("tr:not(:first)").each(function(){
				var se=$(this).find("select").val();
				var we=$(this).find("input[name='wei']").val();
				var no=$(this).find("input[name='num']").val();
				datas+=se+","+we+","+no+";";
			});
			datas=datas.substring(0,datas.length-1);
			$("#breedDatas").val(datas);
			form[0].submit();
		}
	});
	
	
});
</script>
</body>
</html>

fengxue_love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[存代码]限制多下拉列表选择项

添加运单 var data ='${breedList }'; var obj = eval("("+data+")"); //存放所有品类 var allMap = new Map(); //unSelecteMap尚未被选择的品类 var unSelecteMap = new Map(); $.each(obj,function(i,item){ allMap.pu
复制链接

扫一扫