精品人妻,v天堂中文在线,99精品国产一区二区三区

基于jQuery的select2下拉框

2018-5-18 高勁

【select2簡介】

select2.js是一個html select美化模擬類jquery插件，但是select2.js又遠(yuǎn)非簡單的模擬美化那么簡單，它還具有搜索功能，多選功能（可限制選擇數(shù)量），ajax方式加載數(shù)據(jù)，可以設(shè)置placeholder……

【引入文件】

<linkrel="stylesheet" href="./css/select2.css">

<scriptsrc="./js/jquery-2.1.0.js"></script>

<scriptsrc="./js/select2.full.js"></script>

【select2的簡單用法】

設(shè)置禁用狀態(tài)disabled，如：$(".js-example-disabled").prop("disabled",false);
默認(rèn)值設(shè)置：$("#select2").val("1").trigger("change");
多選的默認(rèn)值可以使用：$("#select2").val(["1","2"]).trigger("change"); 這樣傳遞數(shù)組過
select2還有豐富的自定義事件

JavaScript

$("#select2").on("select2:open", function (e) { log("select2:open", e); });

$("#select2").on("select2:close", function (e) { log("select2:close", e); });

$("#select2").on("select2:select", function (e) { log("select2:select", e); });

$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });

$("#select2").on("change", function (e) { log("change"); });

【select2的其他組件】

一、多選效果

效果圖

代碼如下

Html代碼

<div class="box1 div">

<p>多選下拉框</p>

<select id="sel_menu1" multiple="multiple" class="form-control">

<optgroup label="系統(tǒng)設(shè)置">

<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">訂單導(dǎo)入</option>

<option value="7">訂單刪除</option>

<option value="8">訂單撤銷</option>

</optgroup>

<optgroup label="基礎(chǔ)數(shù)據(jù)">

<option value="9">基礎(chǔ)數(shù)據(jù)維護(hù)</option>

</optgroup>

</select>

</div>

JS代碼

$("#sel_menu1").select2({[/align]
tags: true,
maximumSelectionLength: 3 //最多能夠選擇的個數(shù)

});

二、圖文結(jié)合效果

效果圖

代碼

Html代碼

JS代碼

$("#sel_menu2").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState(state) {
            if (!state.id) {
                return state.text;
            }
var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };

基于jQuery的select2下拉框

分類

日歷

鏈接

個人資料

存檔