您的位置：首页 > 编程语言
[存代码]限制多下拉列表选择项

2016-07-04 16:55 387 查看
下拉列表只能显示未被选择过的选择项，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" onclick="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" onfocus="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" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航