Multi-select dropdown. And the selected value is displayed in the text box.

1. Effect

 

 

2. The corresponding reference js.

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

 

3.HTML part

<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. The multi-binding selected from the pull-down data

var formSelects = layui.formSelects;

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

Province function (Id, code, Level) {
$ .ajax ({
URL: "/ the Map / GetAreaByParent1",
type: "POST",
the async: to false, / * Do not use asynchronous * /
Data: {ParentCode: code},
Success : function (Data) {
var select_sheng = $ ( "#" + Id + "") [0];
for (I = 0; I <data.model.length; I ++) {
   opt = new new Option-(data.model [ I] .areaname, data.model [I] .areacode);
   select_sheng.options.add (opt);
}
. // multiple selection drop-down box rendering interface does not render the display.
formSelects.render ();
}
} );
};

5. Select / Invert Selection events

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

 

  }

6. set the display value. HaoProvinceArr is an array.

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