- 引入js和css
<link rel="stylesheet" href="/${res}/dist/css/select2.min.css">
<script type="text/javascript" src="/${res}/dist/js/select2.min.js"></script>
2. 根据id 在js中初始化select2 控件
var listmz = [];
for(var i=0;i<mzlist.length;i++){
var obj = {id:mzlist[i].id,text:mzlist[i].name}
listmz.push(obj);
}
$("#mzdm_search").select2({
data:listmz
});
var gjlist = $scope.jlfkZd.GJ;
var listgj = [];
for(var i=0;i<gjlist.length;i++){
var obj = {id:gjlist[i].id,text:gjlist[i].name}
listgj.push(obj);
}
$("#gjdm_search").select2({
data:listgj
});
var jglist = $scope.jlfkZd.GDSZZJGDM;
var listjg = [];
for(var i=0;i<jglist.length;i++){
var obj = {id:jglist[i].id,text:jglist[i].name}
listjg.push(obj);
}
$("#jgdm_search").select2({
data:listjg
});
html部分
<select class="form-control" id="jgdm_search">
<option value="">请选择分类</option>
</select>
3. 获取选择的值
$("#jgdm_search").val()
4. 下拉框回显 (修改值)
$("#jgdm_search").val("").trigger("change");
本文详细介绍了如何在项目中集成并使用Select2控件,包括引入JS和CSS文件,通过JavaScript初始化控件,填充数据,以及如何获取和设置选中的值。适用于希望提升网页表单交互体验的前端开发者。
134

被折叠的 条评论
为什么被折叠?



