2018-5-18 周周
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的其他組件】
<div class="box1 div">
<p>多選下拉框</p>
<select id="sel_menu1" 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>
</div>
JS代碼
$("#sel_menu1").select2({[/align]
tags: true,
maximumSelectionLength: 3 //最多能夠選擇的個數
});
代碼
Html代碼
<div class="box2 div">
<p>圖文結合的效果</p>
<select id="sel_menu2" class="js-example-templating js-states form-control">
<optgroup label="系統設置">
<option value="1">用戶管理</option>
<option value="2">角色管理</option>
<option value="1">部門管理</option>
<option value="1">菜單管理</option>
</optgroup>
<optgroup label="訂單管理">
<option value="1">訂單查詢</option>
<option value="1">訂單導入</option>
<option value="1">訂單刪除</option>
<option value="1">訂單撤銷</option>
</optgroup>
<optgroup label="基礎數據">
<option value="1">基礎數據維護</option>
</optgroup>
</select>
</div>
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;
};