select2 支援多值下拉框

阿新 • • 發佈：2019-01-14

select2是一個非常好用的下拉框外掛，支援很多功能。

官方文件，例子：http://select2.github.io/

現在記錄一下我在工作中用到的下拉框多值選擇。介面如下：

html定義：

首先引入css,js庫

<link href="#springUrl("")/plugins/select2/select2.min.css" rel="stylesheet" type="text/css" />
<script src="#springUrl("")/plugins/select2/select2.min.js"></script>

在html中定義如下下拉框：

<select id="cluster" class="select2" multiple="multiple">
  <option value="1">jiesi-1</option>
    ...
  <option value="5">jiesi-8</option>
</select>

//注意，上面加上multiple="multiple"就可以讓select支援多選，不加就是單選

//例子：http://select2.github.io/examples.html

初始化：

在js中載入的時候初始化select.

$("#cluster").select2();

如果需要，可以加一些事件函式：

$("#cluster").select2().on("select2:select",function(e){
    getClusterNodes($(this).val(),null);
});

使用：

設定select選中某個值：

$("#cluster").val(3);//設定選中值
$("#cluster").trigger("change");//觸發change事件，讓介面上顯示選中的值

設定select多值選中：

$("#cluster").val([2,3]).trigger("change");//設定多個值選中

設定select選中某個值，並且觸發選中事件

$("#clusterSelect").val(selectedCluster.id).trigger("change").trigger("select2:select");

//獲取select選中的值：

alert($("#cluster").val());//3,4,5 //輸出選擇的value，如果有多個值之間逗號分隔
var selected = $("#cluster").select2('data');//選擇的值
for (var i=0;i<selected.length;i++) {
    alert(selected[i].id + '->' + selected[i].text);//輸出 2->jiesi-1
}

例子：multiSelectTest.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>select 測試</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div>
    <h1>單選測試</h1>
    <select id="single_select" style="width: 400px;">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="cc">cc</option>
        <option value="dd">dd</option>
    </select>
    <button type="button" onClick="search1();">查詢</button>
</div>
<div>
    <h1>多選測試</h1>
    <select id="multi_select" style="width: 400px;" multiple="multiple">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="cc">cc</option>
        <option value="dd">dd</option>
    </select>
    <button type="button" onClick="search2();">查詢</button>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</body>
<script type="text/javascript">
$(document).ready(function() {
        $("#single_select").select2();
$("#multi_select").select2();
});
function search1() {
        alert($("#single_select").val());
}

    function search2() {
        alert($("#multi_select").val());
}

</script>
</html>

select2 支援多值下拉框

select2是一個非常好用的下拉框外掛，支援很多功能。官方文件，例子：http://select2.github.io/ 現在記錄一下我在工作中用到的下拉框多值選擇。介面如下： html定義：首先引入css,js庫 <link href="#sp

使用select2實現多功能下拉框，select2中文api

最近專案中有個需求是商品能夠選擇多個標籤，類似jire中選擇標籤：能把選擇後選項顯示在輸入框中，刪除時連同整個標籤一起刪。經過網上諮詢、請教同事後，得到一致意見是使用select2。下面是使用select2的初始化、動態賦值，實現標籤化多選、以及遇到的問題： 2，在

使用ajax給頁面的多個下拉框動態賦值

一。前臺頁面 $.post("${ctx}/basedata/baseData.do?method=queryPlantUnitList",function(data){ var optionvalue=eval("("+data+")");

form表單提交多個下拉框獲取select選項值，name相同

獲取多選下拉框（select標籤設定multiple屬性）的值

<select multiple>不能直接獲取value，需要藉助該元素的options屬性。如下： <select id="select" multiple> <option value="1">1111</option> &

EasyUI多選下拉框的取值和賦值

@RequestMapping("/getCodeList") public void getCodeList(HttpServletResponse resp){ ResUtil.res

Bootstrap select多選下拉框賦值

Bootstrap Multi-Select Plugin的動態資料插入使用圖片：這個你看到的是我頁面的效果，我將裡面的js程式碼修改了一點，擴充套件了一下顯示的結果id,text，這是固定的，後面的是我又加了一個引數參考頁面：多選框外掛連結（這個就是那個多選的

Extjs多選下拉框multiSelect支援reset

多選，增加時會記憶上一次的選中的內容，表單reset對其無效，通過此修改可使表單reset時也會跟著清空。以下程式碼是在multiSelect.js的基礎上進行簡單修改的。 if('function' !== typeof RegExp.escape) { RegExp.

angularjs 多選下拉框控制元件angularjs ui-select2

angularjs ui-select2:http://jsfiddle.net/jLD42/4/(這個網站測試通過),網站內容如下:找了很多其他的網站都沒用,這個是測試通過的,需要匯入所需要的js檔案,需要的圖片: 這個如果控制元件寬度是比較窄的話

Easyui多個下拉框聯動效果

code this .com cti 下拉框聯動 reload tex count 多個好久沒寫前端了，以前在做多級聯動的時候，用的是easyui的tree結構，但是需要一次性全部加載，不是按需加載，性能不好，退而求其之，用多個下拉框做 eayui的combobox 有

基於element-ui的多選下拉框和tag標簽的二次封裝

line ron click opacity ext width 顯示模塊 scss 前言：今年這大半年我主要負責公司的後臺教務管理的開發，這個管理系統目前主要是給公司的內部人員去配置公司的核心項目（例如：熊貓小課）的所有數據，例如課程的配置、課程期數的配置、課程版本

bootstrap-select動態級聯多選下拉框

1、引用css/js <link href="../../plugins/css/bootstrap.min.css" rel="stylesheet"> <link href="../../plugins/css/plugins/bootstrap-table/bootstr

select2點選空白處下拉框不消失

我看網上都說是父元素的高度不夠，但是我增加了父元素的高度。方法1：除錯發現點選所屬的父級容器，所以簡單處理就是可以在頁面加大高度，其實就是所在頁面的body第一層容器高度 <div class="container" style=" height:1000px;width:10

select獲取下拉框的值下拉框預設選中

本文主要介紹select下拉框的相關方法。1.通過id獲取下拉框的value和文字值例如： <select class="form-control" id="numbers"> <option value="1"&g

多個下拉框z-index層級影響的問題解決

什麼是z-index?定義和用法z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。註釋：元素可擁有負的 z-index 屬性值。註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！寫這篇文章

Bootstrap-select多選下拉框實現

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootst

多個下拉框聯動及回顯（Jquery）

應用場景如下：程式碼實現如下： <%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %> <%@ include file="

bootstrap做前端需要實現多選下拉框

首先需要用到一個外掛bootstrap-select.min.js，新增以下引用：bootstrap-select.cssbootstrap-select.min.cssjquery-editable-select.css.cssbootstrap-select.jsboot

EasyUI 中多選下拉框 combotree 學習研究

增加可以獲取的兩個選擇屬性: //alert($("#cc").combotree("getValue")); //獲取key var wordstr= $("#aa").combotree("getValues"); //獲取多選的key alert($("#cc").combotree("get

前端多選下拉框jquery的multiselect

官方demohttp://loudev.com/#demos網上例子，不知道咋回事，那個全選啥的無效果https://www.jb51.net/article/37323.htm看了部落格文章，然後選擇

select2 支援多值下拉框

相關推薦