多选下拉.并且把选中的值.显示在文本框中.

Posted 2022-06-20 tanyong

1.效果

 

 

2.引用的对应的js.

<script src="~/Scripts/js/formSelects-v4.min.js"></script>

 

3.html部分

<div class="layui-input-block xc-icon">
     <select name="sheng" id="idUserHao_Province" xm-select="userHao_Province" lay-filter="brickType"></select>
     <input type="hidden" id="userHao_HidProvince" />
     <input type="hidden" id="userHao_HidProvinceName" />
</div>

4.多选下拉数据绑定

var formSelects = layui.formSelects;

province("idUserHao_Province", "", 1);

function province(Id, code, level)
$.ajax(
url: "/Map/GetAreaByParent1",
type: "post",
async: false, /*异步勿用*/
data: parentCode: code ,
success: function (data)
var select_sheng = $("#" + Id + "")[0];
for (i = 0; i < data.model.length; i++)
   opt = new Option(data.model[i].areaname, data.model[i].areacode);
   select_sheng.options.add(opt);

//多选下拉框的渲染方式.不渲染界面不会展示.
formSelects.render();

);
;

5.选中/反选事件

    formSelects.on(‘userHao_Province‘, function (id, vals, val, isAdd, isDisabled)

 

 

6.设定显示值. haoProvinceArr是一个数组.

formSelects.value("userHao_Province", haoProvinceArr, true);