安装select2
- 下载地址:https://github.com/select2/select2/tags
- 引入js和css文件:
<link href="path/to/select2.min.css" rel="stylesheet" />
<script src="path/to/select2.min.js"></script>
下拉选框实现
……
<select id="select2-example" name="example" style="width:100%" >
<option value="">请选择</option>
</select>
……
<script>
var data = [{ id: 0, text: 'wechat' }, { id: 1, text: 'QQ' }];
$(document).ready(function () {
$("#select2-example").select2({
data: data,
placeholder:'请选择',
allowClear:true //允许清除选中项
})
});
</script>
多级联动实例
html
<label for="province">考试省份:</label>
<select id="select2_province" class="form-control" name="province">
<option value="" selected="selected">请选择</option>
</select>
<label for="specialty">就读专业:</label>
<select id="select2_specialty" class="form-control" name="specialty">
<option value="" selected="selected">请选择</option>
</select>
js
<script>
//初始化省份
$("#select2_province").select2({
data: [{id:1,text:"北京"},{id:2,text:"上海"},{id:3,text:"广东"}],
});
//选择省份事件
$("#select2_province").on("select2:select", function (e){
var province = $(this).val()
resetSelect2('select2_specialty')
selectSpecialty(province)
})
//重置专业下拉选框内容,否则会显示上一个省份的专业
function resetSelect2(id){
$("#"+id).val("").select2()
$("#"+id).html('<option value="" selected="selected">请选择</option>')
}
//异步加载省份对应的专业
function selectSpecialty(province){
$.ajax({
url:"route/to/get/specialty",
type: 'post',
dataType: 'text',
data: {'province':province},
success: function (response) {
if(response!="" && response!=null){
$("#select2_specialty").select2({
data: JSON.parse(response)
});
}
},
error:function(){
alert('请求错误,请稍后重试~','','error')
}
})
}
</script>
注意
:清除上个省份加载进来的选项数据。
刷新回显
单选回显方式:
$(".select2-example").select2('val','1')
多选回显方式:
$(".select2-example").val(['0','2']).trigger("change");