• 下拉框分组,多值选中,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    官网

  • 相关阅读:
    SaltStack(六) 案例练习
    SaltStack(五) SaltStack与ZeroMQ
    SaltStack(四) 配置管理
    SaltStack(三) 远程执行
    js 阳历、阴历互转
    把一个服务器的数据库导入到另一台服务器中
    vue项目 px自动转vw
    oracle创建自增序列和触发器
    svn 无法clean up的解决方案
    vue 后台获取路由表,addRouters动态路由
  • 原文地址:https://www.cnblogs.com/Evan-Pei/p/14048456.html
Copyright © 2020-2023  润新知