前言：在介紹select元件的時候，博主之前分享過一篇JS元件系列——兩種bootstrap multiselect元件大比拼，這兩個元件的功能確實很強大，只可惜沒有圖文結合的效果（也就是將圖片放入到select裡面隨著文字一起顯示）。前兩天做一個選單圖示選擇的功能，就要用到這個圖文選擇的功能。於是乎又是找啊找。終於不負所望，找到了我們偉大的select2元件。今天分享下這個元件的一些用法和特性。

一、元件說明以及API說明

二、元件特性效果展示

一些通用的單選、多選、分組等功能這裡就不多做介紹了，multiselect這方面是強項。重點介紹下select2的一些特性效果：

1、多選效果

可以設定最多隻能選幾個

2、圖文結合的效果

3、遠端搜尋功能（即在使用者輸入搜尋內容時動態去後臺取資料）

輸入內容前

輸入空格搜尋出全部

滾動條滑動到底部自動載入剩餘項

輸入文字動態去後臺過濾

更高階的用法如：

其實使用起來也不難，就是一個拼html的過程。

三、程式碼示例

1、多選效果

select2的多選很簡單，設定一個屬性就好了。

 　　<script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Content/bootstrap/js/bootstrap.js"
 
></script>
    <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />

    <script src="~/Content/select2-master/dist/js/select2.js"></script>
    <link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />

　　<select id="sel_menu2" multiple="multiple"
 
 class="form-control">
         <optgroup label="系統設定">
              <option value="1">使用者管理</option>
              <option value="2">角色管理</option>
              <option value="3">部門管理</option>
              <option value="4">選單管理</option>
         </optgroup>
         <optgroup label="訂單管理">
              <option value="5">訂單查詢</option>
              <option value="6">訂單匯入</option>
              <option value="7">訂單刪除</option>
              <option value="8">訂單撤銷</option>
         </optgroup>
         <optgroup label="基礎資料">
              <option value="9">基礎資料維護</option>
          </optgroup>
     </select>

    //多選
    $("#sel_menu2").select2({
        tags: true,
        maximumSelectionLength: 3  //最多能夠選擇的個數
    });

2、圖文結合的效果

<select id="sel_menu" class="js-example-templating js-states form-control">
             <optgroup label="系統設定">
                 <option value="1">使用者管理</option>
                 <option value="2">角色管理</option>
                 <option value="3">部門管理</option>
                 <option value="4">選單管理</option>
             </optgroup>
             <optgroup label="訂單管理">
                 <option value="5">訂單查詢</option>
                 <option value="6">訂單匯入</option>
                 <option value="7">訂單刪除</option>
                 <option value="8">訂單撤銷</option>
             </optgroup>
             <optgroup label="基礎資料">
                 <option value="9">基礎資料維護</option>
             </optgroup>
         </select>

$(function () {
    //帶圖片
    $("#sel_menu").select2({
        templateResult: formatState,
        templateSelection: formatState
    });
});

function formatState(state) {
    if (!state.id) { return state.text; }
    var $state = $(
      '<span><img src="/content/images/' + state.element.value.toLowerCase() + '.ico" class="img-flag" /> ' + state.text + '</span>'
    );
    return $state;
};

3、遠端搜尋功能（即在使用者輸入搜尋內容時動態去後臺取資料）

 <select id="sel_menu3" class="js-data-example-ajax form-control">
      <option value="3620194" selected="selected">請選擇</option>
 </select>

$(function () {
    //遠端篩選
    $("#sel_menu3").select2({
        ajax: {
            url: "/Home/GetProvinces",
            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 * 10) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatRepoProvince, // omitted for brevity, see the source of this page
        templateSelection: formatRepoProvince // omitted for brevity, see the source of this page
    });
});

function formatRepoProvince(repo) {
    if (repo.loading) return repo.text;
    var markup = "<div>"+repo.name+"</div>";
    return markup;
}

這裡有要注意的一個地方就是processResults屬性對應的方法有一個more屬性用於是否分頁顯示的，這裡的值要和你需要一次顯示的值的條數匹配。

後臺對應的方法如下：

public List<string> lstProvince = new List<string>() {"北京市","天津市","重慶市","上海市","河北省","山西省","遼寧省","吉林省","黑龍江省","江蘇省","浙江省","安徽省","福建省","江西省","山東省
            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
JQUERY外掛select2.js
     
 
                

前言：在介紹select元件的時候，博主之前分享過一篇JS元件系列——兩種bootstrap multiselect元件大比拼，這兩個元件的功能確實很強大，只可惜沒有圖文結合的效果（也就是將圖片放入到select裡面隨著文字一起顯示）。前兩天做一個選單圖示選擇的功能，就要 

  
 

    

    
    
bootstrap外掛--select2.js--一個基於jQuery的替換框
     
 當然，首先需要引入，select2.css，jquery，boostrap.js，select2.js 
 
多選     新增屬性 

 multiple="multiple"
 

  
   
 
  
 
 function formatRepoPro 

  
 

    

    
    
jquery.validate.js校驗select2解決方案 Jquery外掛select2校驗解決方案
     
 
                

為了用jquery.validate.js校驗select2，折騰了2天，現在終於解決了，把方法告訴大家。


一、使用用了select2美化select




Js程式碼  


$('select').select2();  




二、頁面部分程式碼




H 

  
 

    

    
    
jquery外掛select2事件不起作用（select2-3.5.4）
     
 

jquery外掛select2事件不起作用

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g 

  
 

    

    
    
jquery之select2.js控制元件
     
 
                                        
                                                1. jQuery為select控制元件增加/移除事件： $("#select_id").change(function(){// 

  
 

    

    
    
前端外掛jquery.singlePageNav.min.js(導航點選選單跳轉與點選縮放選單摺疊按鈕緩衝效果外掛)
     
  
 
 Bootstrap導航點選選單跳轉與點選縮放選單摺疊按鈕緩衝效果外掛jquery.singlePageNav.min.js 
 引入步驟： 
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">< 

  
 

    

    
    
jquery外掛匯出與word：jquery.wordexport.js
     
 前言 
　　今天專案中遇到一個需求把我們系統中的統計資料匯出來（主要是表格）。其實實現的的方法有很多，而此次針對我的系統第一獲取資料有點慢，加上前不久寫了一個線上閱讀pdf與word，故此這次也想用前端的方式來匯出。其實網上大致是兩種一種是微軟那種直接排除了，選擇了運用第三方外掛的方式。我用的jquery.w 

  
 

    

    
    
Jquery外掛（下拉框帶本地模糊搜尋值的外掛）jquery.searchableSelect.js
     
  
 
 jquery.searchableSelect.css需要引入的js和Css   
 <script src="/js/plugins/searchableSelect/jquery.searchableSelect.js"></script> <link h 

  
 

    

    
    
強大的jQuery圖片檢視器外掛Viewer.js
     
 簡介 
Viewer.js 是一款強大的圖片檢視器 
Viewer.js 有以下特點： 

  
 支援移動裝置觸控事件
  
 支援響應式
  
 支援放大/縮小
  
 支援旋轉（類似微博的圖片旋轉）
  
 支援水平/垂直翻轉
  
 支援圖片移動
  
 支援鍵盤
  
 支援全屏幻燈片模式（可做屏保 

  
 

    

    
    
js位置、如何定義、呼叫、變數提升、事件繼承、名稱空間、jquery外掛等等
     
  
 
 
 js位置 
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js程式碼位置</title>
        & 

  
 

    

    
    
jQuery的select2下拉框的搜尋功能(使用select2外掛，方便簡單)
     
 第一步: 
引入我們用使用的外掛 
jquery: 
select2： 
css: 

  
js: 
第二步: 
建立一個html頁面，body內容: 
<div>
    <select class="singleSelect" style="width: 200px;">
    

  
 

    

    
    
jQuery 關於ScrollableGridPlugin.js（固定表頭）外掛的逐步解析
     
  
  1 /*!
 2 * This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers.
 3 */
 4 (function ($) {
 5     / 

  
 

    

    
    
jQuery全屏滾動外掛 FullPage.js API
     
 
							
							
							引入檔案



<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<scrip 

  
 

    

    
    
jQuery全屏滾動外掛fullPage.js預覽
     
 
                原理：window.onmousewheel

參考文件 ：



酷炫的全屏製作，在網路上整理了一下，基本的方法如下：

選項                     型別      預設值        說明
verticalCentered    字串    true  

  
 

    

    
    
select2.js外掛支援拼音搜尋（最新版-4.0.6）
     
 
                通過兩天的研究，學會使用select2.js，並且修改了select2.js的原始碼，實現拼音搜尋的功能（pinyin.js連結，將中文轉換成拼音），下面主要講解如何實現拼音搜尋功能：

1.從https://select2.org/官網上下載最新的select2.js，學習 

  
 

    

    
    
jquery外掛前端匯出與word：jquery.wordexport.js
     
 前言
　　今天專案中遇到一個需求把我們系統中的統計資料匯出來（主要是表格）。其實實現的的方法有很多，而此次針對我的系統第一獲取資料有點慢，加上前不久寫了一個線上閱讀pdf與word，故此這次也想用前端的方式來匯出。其實網上大致是兩種一種是微軟那種直接排除了，選擇了運用第三方外掛的方式。我用的jquery.w 

  
 

    

    
    
jQuery外掛jquery.kxbdmarquee.js實現無縫滾動效果
     
  
 
 轉：https://www.jb51.net/article/105618.htm 
 這篇文章主要為大家詳細介紹了jQuery常用外掛jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價值，感興趣的小夥伴們可以參考一下 
 1.html程式碼 
 <head>
	& 

  
 

    

    
    
使用jQuery外掛時避免重複引入jquery.js檔案（jQuery 重複載入錯誤以及修復方法）
     
 
最近在做專案的時候，遇到個問題：
父頁面引入子頁面，子頁面引入jQuery.js檔案，父頁面JS依賴jQuery.js ，出現問題是，總提示JS物件無效。猜測jQuery載入順序不是最早造成的。
父頁面：
子頁面：
從這裡看 ，jQuery.js 是最早的咯，可是為什麼其它的js都提示 屬性無效呢。
後面用 

  
 

    

    
    
jQuery外掛來調整表列的大小colResizable.js 拖動改變單元格寬度
     
 
							
							
							jQuery外掛來調整表列的大小







效果圖： 


colResizable

colResizable是一個免費的jQuery外掛，旨在通過手動拖動列錨點來增強任何型別的HTML表物件，從而增加列重新調整大小的功能。它相容滑鼠和觸控裝置，並具有一些 

  
 

    

    
    
jquery滑鼠滾動數字增加外掛---countUp.js
     
 
							
							
							CountUp.js 無依賴的、輕量級的 JavaScript 類，可以用來快速建立以一種更有趣的動畫方式顯示數值資料。儘管它的名字叫 countUp，但其實可以在兩個方向進行變化，這是根據你傳遞的 startVal 和 endVal 引數判斷的。

 
可配置