码迷,mamicode.com
首页 > Web开发 > 详细

.Net 下拉多选框 实例

时间:2020-04-22 16:14:39      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:fun   box   lin   dna   data-   style   form   net   添加   

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

这2个到底是啥区别呢?

 

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",
            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框架:

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

 

.Net 下拉多选框 实例

标签:fun   box   lin   dna   data-   style   form   net   添加   

原文地址:https://www.cnblogs.com/yokiblogs/p/12752463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!