Layui 下拉框多选 —老司机首选
https://blog.csdn.net/YBaog/article/details/79933223
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>添加合同档案</title>
<link rel="stylesheet"
href="${pageContext.request.contextPath }/jey/css/x-admin.css"
media="all" type="text/css">
<script
src="${pageContext.request.contextPath }/jey/lib/layui/layui.js"></script>
<script src="${pageContext.request.contextPath }/jey/js/x-layui.js"></script>
<head>
<script type="text/javascript">
function addPower(){
$.ajax({
type: "POST",
async: false,
url: "<%=request.getContextPath()%>/supply/addHt.action",
data: $("#addForm").serializeArray(),
dataType:"json",
error: function(){
alert('操作失败');
},
success: function(data){
var res = data;
if(res==true){
layer.alert("增加成功", {icon: 1},function () {
x_admin_close();
window.parent.location.reload();
});
}else{
layer.alert("添加失败", {icon: 2},function () {
x_admin_close();
window.parent.location.reload();
});
}
}
});
}
layui.use([‘layer’,‘jquery’,‘form’,‘element’,‘util’], function(){
var layer = layui.layer,form = layui.form,element = layui.element,util = layui.util,$=layui.jquery;
$(function(){
// //遍历渲染 不建议用
// $("select.downlist").each(function(index,item) {
// var $this=$(this);
// var $select=$this.next(".layui-form-select");
// $select.addClass("downpanel");
// var $dl=$select.find("dl");
// $(".layui-select-title input",$select).val($this.attr("placeholder"));
// $dl.empty();
// var str="";
// $("option",$this).each(function() {
// str=["<dd>","<input class='sk' type='checkbox' name='brand[",$(this).val(),"]' lay-skin='primary' title='",$(this).text(),"' value='true'>","</dd>"].join("");
// $dl.append(str);
// });
// form.render("checkbox");
//
// });
$(".downpanel").on("click",".layui-select-title",function(e){
var $select=$(this).parents(".layui-form-select");
$(".layui-form-select").not($select).removeClass("layui-form-selected");
$select.addClass("layui-form-selected");
e.stopPropagation();
}).on("click",".layui-form-checkbox",function(e){
e.stopPropagation();
});
});
});
var id_array=[];
KaTeX parse error: Expected '}', got 'EOF' at end of input: … id_array.push((this).val());//向数组中添加元素
});
var idstr=id_array.join(’,’);//将数组元素连接起来以构建一个字符串
</script>
</head>
<body>
<div class="x-body">
<form class="layui-form" name="addForm" id="addForm" method='post'>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
合同信息
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
合同编号
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
合同名称
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
租客信息
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
租客全称
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
租客编号
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
租客类别
</label>
<div class="layui-input-inline">
<select name="type">
<option value="">
请选择
</option>
<option value="">个人</option>
<option value="">公司</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
工商注册/身份证号
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
租客地址
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
法定代表人
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
法人电话
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
联系人1
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
联系人1电话
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
房间信息
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
房间名称
<span class="x-red">*</span>
</label>
<div class="layui-unselect layui-form-select downpanel cs">
<div class="layui-select-title">
<input type="text" placeholder="请选择房间名称(表达方式：xx楼栋xx楼层xx房间,比如2-3-101表示2栋3楼层101房间)" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit" style="">
<dd><input type="checkbox" name="customernumber" title="2-3-101" value="1" lay-skin="primary" ></dd>
<dd><input type="checkbox" name="customernumber" title="3-3-102" value="2" lay-skin="primary" ></dd>
<dd><input type="checkbox" name="customernumber" title="2-3-103" value="3" lay-skin="primary" ></dd>
<dd><input type="checkbox" name="customernumber" title="2-3-104" value="4" lay-skin="primary" ></dd>
</dl>
</div>
<label for="customernumber" class="layui-form-label">
租赁总面积(㎡)
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
租期信息
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
租赁期起
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="date" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
租赁期止
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="date" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
租赁时长(天)
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
签订日期
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="date" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
交付日期
<span class="x-red">*</span>
</label>
<div class="layui-input-inline">
<input type="date" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
费项信息
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项编号1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
费项名称1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费标准1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项编号2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
费项名称2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费标准2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项编号3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
费项名称3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费标准3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
合价金额1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
合价金额2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
合价金额3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
优惠政策
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
优惠编号1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
优惠名称1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费日起
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
计费日止
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
优惠编号2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
优惠名称2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项名称
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
惠后标准
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
合同金额
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项名称1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
合同金额1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项名称2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
合同金额2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项名称3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
合同金额3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
付款方式
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项名称1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费日起1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费日止1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项名称2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费日起2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费日止2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
费项名称3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费日起3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
计费日止3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
计费周期1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
提前付款天数1
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
计费周期2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
提前付款天数2
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
计费周期3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
提前付款天数3
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
渠道信息
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
销售专员
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
销售部门
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
租客信息来源
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
渠道简称
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
渠道全称
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
工商注册号
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
工商注册地址
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
法定代表人
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
<label for="customernumber" class="layui-form-label">
联系电话
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
经营办公地址
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label
style="float: left; font-size: 18px; box-sizing: border-box; padding: 0 0 5px 25px; font-weight: 600;">
其他附件
</label>
<hr style="margin: 0 2%" />
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
上传合同
</label>
<div class="layui-input-inline">
<input type="text" id="customernumber" name="customernumber"
required="" lay-verify="required" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="customernumber" class="layui-form-label">
备注说明
</label>
<div class="">
<input style="width: 70%; height: 100px;" type="text"
id="customernumber" name="customernumber" required=""
lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-bottom" style="align:center">
<input type="button" class="layui-btn" value="增加" onclick="addPower()">
<input type="button" class="layui-btn layui-btn-danger" value="取消" onclick="cloPower()">
</div>
</form>
</div>
</body>
___________________________________-案例