下载 js 和 css 分别放在 layui/lay/modules 下 , layui/css/modules formSelects-v4 下
html
<div>
<select name="province" id="province" class="form-control">
<option value="100000">全国</option>
<volist name="province_list" id="vo">
<option value="{$vo.value}">{$vo.name}</option>
</volist>
</select>
<input id="sub" type="checkbox" checked="checked"> <span class="sub-label">显示到县级</span>
<input id="short_name" type="checkbox" checked="checked"> <span class="sub-label">去掉 (县 /区 后缀)</span>
<span>已选中:<em id="counts">0</em> 个</span>
</div>
<div class="layui-form">
<select name="city" xm-select="example6_4" xm-select-search="">
<option value="">点击选取地名</option>
</select>
</div>
js
//全局定义一次, 加载formSelects
layui.config({
base: "__PUBLIC__/js/layui2/lay/modules/" //此处路径请自行处理, 可以使用绝对路径
}).extend({
formSelects: 'formSelects-v4'
});
//加载模块
layui.use(['jquery', 'formSelects'], function(){
var formSelects = layui.formSelects;
formSelects.value('example6_4', 'all');
$("#province").change(function(){
var province_id = $('#province').val();
var type =0;
if($("#sub").is(':checked')){
type =1;
}
var is_short = '0';
if($("#short_name").is(':checked')){
is_short = '1';
}
formSelects.config('example6_4', {
type: 'post', //请求方式: post, get, put, delete...
header: {}, //自定义请求头
data: {'type':type,'short':is_short}, //自定义除搜索内容外的其他数据
searchUrl: '{:U('user/task/getListOfCity')}', //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
searchName: 'keyword', //自定义搜索内容的key值
searchVal: province_id, //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
keyName: 'name', //自定义返回数据中name的key, 默认 name
keyVal: 'value', //自定义返回数据中value的key, 默认 value
shortNa: 'short_name', //自定义返回数据中name的key, 默认 name
keySel: 'selected', //自定义返回数据中selected的key, 默认 selected
keyDis: 'disabled', //自定义返回数据中disabled的key, 默认 disabled
keyChildren: 'children', //联动多选自定义children
delay: 500, //搜索延迟时间, 默认停止输入500ms后开始搜索
direction: 'down', //多选下拉方向, auto|up|down
linkage: true,
linkageWidth: 130,
clearInput: false, //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
}, true);
$("#counts").text(formSelects.value('example6_4', 'name').length);
});
formSelects.on('example6_4', function(id, vals, val, isAdd, isDisabled){
$("#counts").text(formSelects.value('example6_4', 'name').length);
});
//取值选中 城市
$(".city_select").on("click",function() {
var a = formSelects.value('example6_4', 'name');
b = a.length;
if (0 >= b) {
Wind.use('artDialog',function(){
art.dialog({
id : "alert",
icon : "error",
content : "请至少选择一个地区",
ok : function() {}
});
});
}else {
var thisCitys = formSelects.value('example6_4', 'name');
var d="";
var new_arr = [];
for (var f = 0; f < thisCitys.length; f++) {
if($.inArray(thisCitys[f],new_arr)==-1) {
new_arr.push(thisCitys[f]);
}
}
//去重
for(var i=0;i<new_arr.length; i++){
d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
}
$("#area").val(d);
$('#myModal').modal("toggle");
$(".modal-backdrop").remove();
lineTotal('#area');
}
});
//城市追加
$(".city_append").on("click",function() {
var a = formSelects.value('example6_4', 'name');
b = a.length;
if (0 >= b) {
Wind.use('artDialog',function(){
art.dialog({
id : "alert",
icon : "error",
content : "请至少选择一个地区",
ok : function() {}
});
});
}else {
var thisCitys = formSelects.value('example6_4', 'name');
var d="";
var str = $("#area").val();
var new_arr = str.split('\n');
for (var f = 0; f < thisCitys.length; f++) {
if($.inArray(thisCitys[f],new_arr)==-1) {
new_arr.push(thisCitys[f]);
}
}
//去重
for(var i=0;i<new_arr.length; i++){
d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
}
// }
$("#area").val(d);
$('#myModal').modal("toggle");
$(".modal-backdrop").remove();
lineTotal('#area');
}
});
});