Bootstrap-select 动态绑定值
需求:
1,下拉框多选功能
2,父级菜单联动
一,下载对应的js,css
https://cdnjs.com/libraries/bootstrap-select //下载对应的js,css
<link href="~/Content/bootstrap/bootstrap-select.css" rel="stylesheet" /> <script src="~/Content/bootstrap/bootstrap.min.js"></script> <script src="~/Content/bootstrap/bootstrap-select.js"></script>
二,页面,js代码(说明:multiple 多选 data-live-search="true" 搜索)
<select id="CateIds" type="select" multiple data-live-search="true"></select>
初始化js绑定方法
$('#CateIds').selectpicker({
'selectedText': 'cat',
'noneSelectedText': '==请选择=='
});
联动绑定
$('#CourseId').bind("change", function () { var _value = $(this).val(); //父选择值 $.ajax({ url: '你的请求地址', data: { courseId: _value },//参数 type: "GET", dataType: "json", async: false, success: function (data) { var data1 = data.data; if (data1.length > 0) { var html = ""; $.each(data1, function (i, item) { html += '<option value="' + item.text + '">' + item.text + '</option>' }); $('#CateIds').html(html); $('#CateIds').selectpicker('refresh');//重新渲染值 $('#CateIds').selectpicker('render'); $('#CateIds').selectpicker({ 'selectedText': 'cat', 'noneSelectedText': '==请选择==' }); } else { $('#CateIds').html(""); $('#CateIds').selectpicker('refresh');//重新渲染值 $('#CateIds').selectpicker('render'); $('#CateIds').selectpicker({ 'selectedText': 'cat', 'noneSelectedText': '==请选择==' }); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { dialogMsg(errorThrown, -1); } }); });
三,修改绑定值
var valueArr = []; var str=""; var varr = data.CateIds.split(','); //数据库存储的值,多个默认逗号分隔 for(var i=0;i<varr.length;i++){ valueArr.push(varr[i]); } $("#CategoryIds").selectpicker('val', valueArr); //绑定值 $('#CategoryIds').selectpicker('refresh');//刷新
四,获取选中值
// js代码如下: // 获取到下拉框说所有选中项 var checkParam = $('#CateIds').find('option:selected'); // 选中的ID集合 var checkId = []; // 选中的文本值集合 var checkText = []; for (var i=0;i<checkParam.length;i++) { checkId.push(checkParam[i].value); } for (var i=0;i<checkParam.length;i++) { checkText.push(checkParam[i].textContent); } // 数组转字符串 var ids = checkId.join(','); var text = checkText.join(',');
// 1.定义对象,并设置属性名和值---------------------------------------------
// 判断是否选中
if (checkParam.length > 0) {
var hilidayFlag = 1;
// 定义传入参数对象,并赋值
var params = {
holidayFlag: holidayFlag,
shuttleBusId: ids,
shuttleBusName: text
}
}
// 2.定义对象,并设置属性名和值---------------------------------------------
// 获取表单值
var user= {};
// 获取到页面表单中所有值 name-value形式
var formData = $('#addForm').serializeArray();
formData.forEach(function (item) {
user[item.name] = item.value;
})
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!