扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关BootStrap与Select2怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的平和网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
这个select2组件的功能确实很强大，可以将图片放入到select里面随着文字一起显示。
组件的下载地址以及API说明地址：
1、Select2使用示例地址：https://select2.github.io/examples.html 、http://select2.github.io/select2/
2、Select2参数文档说明：https://select2.github.io/options.html
3、Select2源码：https://github.com/select2/select2
效果图：
HTML代码：
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@*
*@
$(document).ready(function () {
$("#test").select2();
//--------------------------------------
$("#test_1").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
theme: "classic"
});
//------------------------------------------------------
$("#test_2").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择",
minimumInputLength: 10 //最小需要输入多少个字符才进行查询
});
//-------------------------------------------------------
$("#test_3").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择",
tags: true,
maximumSelectionLength: 2 //设置最多可以选择多少项
});
//----------------------------------------------------
$("#test_4").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择",
allowClear: true,
tags: true,
maximumSelectionLength: 2, //设置最多可以选择多少项
templateResult: function (state) {
if (!state.id) {
return state.text;
}
console.log(state.element.getAttribute("imgPath"));
var $state = $('" + repo.text + " 1、可搜索选项