.Net 下拉多选框 实例

用了好几天时间终于把下拉多选框的问题给解决了，竟然是async: false的问题，一直回显不出来。后来去掉async: false，封装的函数中包含了async: false，自己重写了就解决了，哎。async设置为：true，则不会等待ajax请求返回的结果，会直接执行ajax后面的语句。

 但竟然有问题，去掉async: false，显示时好时坏，之后在getoption的时候添加async: false，在setvalue的时候也添加async: false。反正不知道为啥好使了。另一种方式在getoption的success后append之后添加setvalue。第二种好理解。第一种完全不能理解。不喜欢async。

 

bootstrap框架如下：

js添加

<link href="~/Scripts/bootstrap-select.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-select.min.js"></script>

html添加

<select id="deptid" class="selectpicker" multiple
data-actions-box="true"
onchange="SelectOnchang()" checkexpession="NotNull" >
</select>

js下拉框获取数据

 

 function GetOption()
    {
        $.ajax({
            type: "post",
            dataType: 'json',
            url: "/xxxModule/xx/GetOption",
async: false,
            success: function (data) {
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    str += '<option value="' + data[i].DId + '">' + data[i].FName + '</option>'
                }
                $(".selectpicker").html(str);
                $(".selectpicker").selectpicker('refresh');
            }
        });
    }

    function SelectOnchang() {
        var val = "", staffs = [];
        var a=$(".selectpicker").find("option:selected");
        for(var i=0;i<a.length;i++)
        {
            staffs.push(a[i].value);
        }
    }

function setoption() {
 
            $.ajax({
                url: '/xxxModule/xxx/setvalue?KeyValue=' + KeyValue,
                dataType: 'json',
                type: 'post',
async: false,
                success: function (data) {
                    var d = eval(data);
                    $("#DName").val(d.DName);
                    $("#Desc").val(d.Des);
                    $("#PH").val(d.PH);
                    $("#M").val(d.PM);
                    $("#PL").val(d.PL);
                    var arr = d.deptid.split(',');
                    $("#deptid").selectpicker('val', arr);
                    $('#deptid').selectpicker('refresh');
                }
            });
        
    }

 

layui框架：

<link href="~/Scripts/formSelects-v4.css" rel="stylesheet" />
<link href="~/Scripts/layui2.5.4/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/layui2.5.4/layui.js"></script>
<script src="~/Scripts/layui2.5.4/layui.all.js"></script>
<script src="~/Scripts/formSelects-v4.js"></script>

html

<select name="selectId" id="deptid" xm-select="selectId" lay-verify="selectId"></select>

 

<script type="text/javascript">
    var KeyValue = GetQuery('KeyValue');//主键
    layui.use(['form', 'jquery'], function () {
        //动态添加下拉框 同时可以设置默认值
        $.ajax({
            url: '/xxx/xxx/GetOption',
            dataType: 'json',
            type:'post',
            success: function (data) {
                // 渲染多选下拉框
                var deptSelectData = new Array();
                for (var i = 0; i < data.length; i++) {
                    //固定样式
                    deptSelectData.push({ name: data[i].FName, value: data[i].DId });
                }
                //本地加载模式local
                layui.formSelects.data('selectId', 'local', { arr: deptSelectData });  
            }
        });

       
    });
    setoption();
    function setoption() {
        if (!!GetQuery('KeyValue')) {
            $.ajax({
                url: '/xxx/xxx/setvalue?KeyValue=' + KeyValue,
                dataType: 'json',
                type: 'post',
                success: function (d) {
                    $("#DName").val(d.DName);
                    $("#Desc").val(d.Desc);
                    $("#PH").val(d.PH);
                    $("#PM").val(d.PM);
                    $("#PL").val(d.L);
                    var arr = d.deptid.split(',');
                    layui.formSelects.value('selectId', arr);
                }
            });
        }
    }
</script>