多選下拉.並且把選中的值.顯示在文本框中.

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);