BootStrap与Select2怎么用

这篇文章将为大家详细讲解有关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

效果图：

BootStrap与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 = $(' ' + state.text + '');
    return $state;
   },
   templateSelection: function (state) {
    if (!state.id) return state.text; // optgroup
    var $state = $(' ' + state.text + '');
    return $state;
   }
  });
  //----------------------------------------------------------
  $("#test_5").select2({
   language: "zh-CN", //设置 提示语言
   width: "100%", //设置下拉框的宽度
   placeholder: "请选择",
    tags: true,
   maximumSelectionLength: 3, //设置最多可以选择多少项
   templateResult: function (state) {
    if (!state.id) {
     return state.text;
    }
    console.log(state.element.getAttribute("imgPath"));
    var $state = $(' ' + state.text + '');
    return $state;
   },
   templateSelection: function (state) {
    if (!state.id) return state.text; // optgroup
    var $state = $(' ' + state.text + '');
    return $state;
   }
  }).select2('val', ['HI', 'OR', 'NV']);
  //-------------------------------------------------------------------
  $("#test_6").select2({
   language: "zh-CN", //设置 提示语言
   width: "100%", //设置下拉框的宽度
   placeholder: "请选择",
   tags: true,
   maximumSelectionLength: 3, //设置最多可以选择多少项
   templateResult: function (state) {
    if (!state.id) {
     return state.text;
    }
    console.log(state.element.getAttribute("imgPath"));
    var $state = $(' ' + state.text + '');
    return $state;
   },
   templateSelection: function (state) {
    if (!state.id) return state.text; // optgroup
    var $state = $(' ' + state.text + '');
    return $state;
   }
  });
  //------------------------------------------------------------------
  $("#test_7").select2({
   ajax: {
    url: "Home/GetArea",
    dataType: 'json',
    delay: 250,
    data: function (params) {
     return {
      q: params.term, // search term
      page: params.page
     };
    },
    processResults: function (data, params) {
     params.page = params.page || 1;
     return {
      results: data.items,
      pagination: {
       more: (params.page * 30) < data.total_count
      }
     };
    },
    cache: true
   },
   escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
   minimumInputLength: 1, 
   language: "zh-CN", //设置 提示语言
   maximumSelectionLength: 3, //设置最多可以选择多少项
   placeholder: "请选择",
   tags: false, //设置必须存在的选项 才能选中
   templateResult: function (repo) { //搜索到结果返回后执行，可以控制下拉选项的样式
    console.log("====================templateResult开始==================");
    console.log(repo);
    console.log("====================templateResult结束==================");
    if (repo.loading) return repo.text;
    var markup = "" + repo.text + "

"; return markup; }, templateSelection: function (repo) { //选中某一个选项是执行 console.log("------------------templateSelection开始-------------------------------------"); console.log( repo); console.log("------------------templateSelection结束-------------------------------------"); return repo.full_name || repo.text; } }); $("#btn").click(function() { alert($("#test_4").select2("val")); }); //$("#test_5").prop("disabled", true); //设置是否可用 }); 默认

Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia
----------------------------------------------------

1、可搜索选项


  
   Alaska
   Hawaii
  
  
   California
   Nevada
   Oregon
   Washington
  
  
   Arizona
   Colorado
   Idaho
   Montana
   Nebraska
   New Mexico
   North Dakota
   Utah
   Wyoming
  
  
   Alabama
   Arkansas
   Illinois
   Iowa
   Kansas
   Kentucky
   Louisiana
   Minnesota
   Mississippi
   Missouri
   Oklahoma
   South Dakota
   Texas
   Tennessee
   Wisconsin
  
  
   Connecticut
   Delaware
   Florida
   Georgia
   Indiana
   Maine
   Maryland
   Massachusetts
   Michigan
   New Hampshire
   New Jersey
   New York
   North Carolina
   Ohio
   Pennsylvania
   Rhode Island
   South Carolina
   Vermont
   Virginia
   West Virginia
  
 

================================

2、可搜索选项（有搜索关键字控制）


 
  
   Alaska
   Hawaii
  
  
   California
   Nevada
   Oregon
   Washington
  
  
   Arizona
   Colorado
   Idaho
   Montana
   Nebraska
   New Mexico
   North Dakota
   Utah
   Wyoming
  
  
   Alabama
   Arkansas
   Illinois
   Iowa
   Kansas
   Kentucky
   Louisiana
   Minnesota
   Mississippi
   Missouri
   Oklahoma
   South Dakota
   Texas
   Tennessee
   Wisconsin
  
  
   Connecticut
   Delaware
   Florida
   Georgia
   Indiana
   Maine
   Maryland
   Massachusetts
   Michigan
   New Hampshire
   New Jersey
   New York
   North Carolina
   Ohio
   Pennsylvania
   Rhode Island
   South Carolina
   Vermont
   Virginia
   West Virginia
  
 

===============================

3、多选


 
  
   Alaska
   Hawaii
  
  
   California
   Nevada
   Oregon
   Washington
  
  
   Arizona
   Colorado
   Idaho
   Montana
   Nebraska
   New Mexico
   North Dakota
   Utah
   Wyoming
  
  
   Alabama
   Arkansas
   Illinois
   Iowa
   Kansas
   Kentucky
   Louisiana
   Minnesota
   Mississippi
   Missouri
   Oklahoma
   South Dakota
   Texas
   Tennessee
   Wisconsin
  
  
   Connecticut
   Delaware
   Florida
   Georgia
   Indiana
   Maine
   Maryland
   Massachusetts
   Michigan
   New Hampshire
   New Jersey
   New York
   North Carolina
   Ohio
   Pennsylvania
   Rhode Island
   South Carolina
   Vermont
   Virginia
   West Virginia
  
 

===============================

4、图文选项


 
  
   Alaska
   Hawaii
  
  
   California
   Nevada
   Oregon
   Washington
  
  
   Arizona
   Colorado
   Idaho
   Montana
   Nebraska
   New Mexico
   North Dakota
   Utah
   Wyoming
  
  
   Alabama
   Arkansas
   Illinois
   Iowa
   Kansas
   Kentucky
   Louisiana
   Minnesota
   Mississippi
   Missouri
   Oklahoma
   South Dakota
   Texas
   Tennessee
   Wisconsin
  
  
   Connecticut
   Delaware
   Florida
   Georgia
   Indiana
   Maine
   Maryland
   Massachusetts
   Michigan
   New Hampshire
   New Jersey
   New York
   North Carolina
   Ohio
   Pennsylvania
   Rhode Island
   South Carolina
   Vermont
   Virginia
   West Virginia
  
 



======================================

5、默认选中某个选项


 
  
   Alaska
   Hawaii
  
  
   California
   Nevada
   Oregon
   Washington
  
  
   Arizona
   Colorado
   Idaho
   Montana
   Nebraska
   New Mexico
   North Dakota
   Utah
   Wyoming
  
  
   Alabama
   Arkansas
   Illinois
   Iowa
   Kansas
   Kentucky
   Louisiana
   Minnesota
   Mississippi
   Missouri
   Oklahoma
   South Dakota
   Texas
   Tennessee
   Wisconsin
  
  
   Connecticut
   Delaware
   Florida
   Georgia
   Indiana
   Maine
   Maryland
   Massachusetts
   Michigan
   New Hampshire
   New Jersey
   New York
   North Carolina
   Ohio
   Pennsylvania
   Rhode Island
   South Carolina
   Vermont
   Virginia
   West Virginia
  
 



=========================================

6、某些选项不能选中


 
  Alaska
  Hawaii
 
 
  California
  Nevada
  Oregon
  Washington
 
 
  Arizona
  Colorado
  Idaho
  Montana
  Nebraska
  New Mexico
  North Dakota
  Utah
  Wyoming
 
 
  Alabama
  Arkansas
  Illinois
  Iowa
  Kansas
  Kentucky
  Louisiana
  Minnesota
  Mississippi
  Missouri
  Oklahoma
  South Dakota
  Texas
  Tennessee
  Wisconsin
 
 
  Connecticut
  Delaware
  Florida
  Georgia
  Indiana
  Maine
  Maryland
  Massachusetts
  Michigan
  New Hampshire
  New Jersey
  New York
  North Carolina
  Ohio
  Pennsylvania
  Rhode Island
  South Carolina
  Vermont
  Virginia
  West Virginia
 



======================================

7、搜索动态加载下拉选项功能（即在用户输入搜索内容时动态去后台取数据）


 
 



=========================================
获取选中的值

控制器action代码：

public class HomeController : Controller
 {
  public IEnumerable areaList = new List()
  { 
   "北京市", 
   "天津市",
   "重庆市",
   "上海市",
   "广州市", 
   "长沙", 
   "哈尔滨", 
   "长春",
   "杭州市", 
   "南京市",
   "福建市",
   "河北省", 
   "山西省", 
   "辽宁省", 
   "吉林省", 
   "黑龙江省",
   "江苏省",
   "浙江省", 
   "安徽省", 
   "福建省", 
   "江西省", 
   "山东省", 
   "河南省",
   "湖北省", 
   "湖南省",
   "广东省", 
   "海南省", 
   "四川省",
   "贵州省", 
   "云南省", 
   "陕西省", 
   "甘肃省",
   "青海省",
   "台湾省",
   "内蒙古自治区", 
   "广西壮族自治区", 
   "西藏自治区", 
   "宁夏回族自治区",
   "新疆维吾尔自治区", 
   "香港特别行政区", 
   "澳门特别行政区" 
  };
  public JsonResult GetArea(string q, string page)
  {
   var area = new { id = 1, name = "" };
   var lstRes = areaList.Select((t, i) => new Area
   {
    id = i,
    text = t,
    element = "element" + i
   });
   if (!string.IsNullOrEmpty(q.Trim()))
   {
    lstRes = lstRes.Where(x => x.text.Contains(q));
   }
   var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10);
   return Json(new { items = lstCurPageRes, total_count = lstRes.Count() }, JsonRequestBehavior.AllowGet);
  }
  public ActionResult Index()
  {
   return View();
  }
 }
namespace Select2Demo.Models
{
 public class Area
 {
  public int id { get; set; }
  public string text { get; set; }
  public string element { get; set; }
 }
}

关于“BootStrap与Select2怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

文章名称：BootStrap与Select2怎么用
文章地址：http://scyanting.com/article/jcjsio.html

BootStrap与Select2怎么用

其他资讯