.Net 下拉多选框实例

用了好几天时间终于把下拉多选框的问题给解决了，竟然是AjaxJson和 $.ajax请求的问题，原先赋值的时候用的AjaxJson方式请求，一直回显不出来。后全部更改为 $.ajax。

这2个到底是啥区别呢？

bootstrap框架如下：

js添加

html添加

js下拉框获取数据

 function GetOption()
    {
        $.ajax({
            type: "post",
            dataType: 'json',
            url: "/xxxModule/xx/GetOption",
            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',
                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框架：

html

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

.Net 下拉多选框 实例

猜你喜欢

.Net 下拉多选框实例