标签: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>
标签:fun box lin dna data- style form net 添加
原文地址:https://www.cnblogs.com/yokiblogs/p/12752463.html