JS組件系列——Bootstrap Select2組件使用小結

時間 2019-11-21

標籤組件系列 bootstrap select2 select 使用小結欄目 JavaScript 简体版

原文原文鏈接

JS組件系列——Bootstrap Select2組件使用小結 http://www.tuicool.com/articles/nYVn22ejavascript

關於select2的CDN資源整理：http://www.bootcdn.cn/select2/php

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/select2/4.0.2/js/select2.js"></script>
<link href="http://cdn.bootcss.com/select2/4.0.2/css/select2.css" rel="stylesheet" />

表單示例：css

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>添加極限活動</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/select2/4.0.2/js/select2.js"></script>
    <link href="http://cdn.bootcss.com/select2/4.0.2/css/select2.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container" width="500px;">

<form method="post" action="./action/add_event.php" class="form-horizontal" role="form" style="margin: 20px;">
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">活動ID</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="event_id" id="event_id" placeholder="請輸入活動ID">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">活動標籤</label>
        <!--
        <div class="col-sm-10">
            <input type="text" class="form-control" id="tags" placeholder="回車肯定">
        </div>
        -->
        <div class="col-sm-10">
        <select id="sel_menu2" multiple="multiple" name="tags" class="form-control">
            <optgroup label="選擇標籤">
                <option value="1">用戶管理</option>
                <option value="2">角色管理</option>
                <option value="3">部門管理</option>
                <option value="4">菜單管理</option>
            </optgroup>
        </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">添加</button>
        </div>
    </div>
</form>
</div>
<script type="text/javascript">
    //多選
    $("#sel_menu2").select2({
        tags: true,
        maximumSelectionLength: 5  //最多可以選擇的個數
    });
</script>
</body>
</html>

表格示例：html

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>極限活動列表</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<table class="table table-hover table-bordered" style="margin: 20px;">
    <caption>邊框表格佈局</caption>
    <thead>
    <tr>
        <th>id</th>
        <th>活動ID</th>
        <th>標籤</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
        <td>560001</td>
    </tr>
    <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
        <td>400003</td>
    </tr>
    <tr>
        <td>Uma</td>
        <td>Pune</td>
        <td>411027</td>
    </tr>
    </tbody>
</table>
</div>
</body>
</html>

http://www.cnblogs.com/wuhuacong/p/4761637.html?utm_source=tuicooljava