下拉框分组,多值选中,select2插件使用

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="scripts/jquery-1.12.2.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <%--multiple="multiple" 多值属性--%>
        <select id="sel_1" class="js-example-basic-multiple" name="state" style=" 500px;" multiple="multiple">
            <optgroup label="A"></optgroup>
            <option value="1">A1</option>
            <option value="2">A2</option>

            <optgroup label="B"></optgroup>
            <option value="3">B1</option>
            <option value="4">B2</option>
        </select>

        <input type="button" value="获取值" onclick="getV();"/>
        <input type="button" value="设置值" onclick="setV();"/>

    </form>
</body>
</html>
<script>
    $(document).ready(function () {
        $('.js-example-basic-multiple').select2();
    });
    //获取
    function getV() {
        var v = $("#sel_1").val();//[1,2]
        var t = $("#sel_1 option:selected").text();
        alert(t);
    }
    //设置值
    function setV() {
        $("#sel_1").val([1,3]).trigger("change");
    }
</script>

https://select2.org/getting-started/basic-usage    官网

原文地址:https://www.cnblogs.com/Evan-Pei/p/14048456.html