如何在选择器引导程序代码中添加自定义选项值?

问题描述 投票:0回答:0

我在 bootstrap 4 中有一个选择器代码,它工作正常,但我想添加一个不在选择选项中的自定义选项。所以,伙计们请提供给我。

                <!DOCTYPE html>
            <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.css">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
                <style>
                    body {
                        padding: 1em;
                    }

                    .wrapper+.wrapper {
                        margin-top: 20px;
                    }
                </style>
            </head>

            <body>
                <div class="wrapper">
                    <select multiple>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    <button type="button" class="chosen-toggle select">Select all</button>
                    <button type="button" class="chosen-toggle deselect">Deselect all</button>
                </div>
                <script>
                    $('select').chosen({ width: "300px" });

                    $('.chosen-toggle').each(function (index) {
                        console.log(index);
                        $(this).on('click', function () {
                            console.log($(this).parent().find('option').text());
                            $(this).parent().find('option').prop('selected', $(this).hasClass('select')).parent().trigger('chosen:updated');
                        });
                    });
                </script>
            </body>

            </html>

在此输入选项中已经选择和取消选择按钮,您可以添加另一个按钮以添加按钮以添加新选项但不是另一个输入,已经给出的输入正在运行搜索过滤器

javascript jquery ajax bootstrap-selectpicker
© www.soinside.com 2019 - 2024. All rights reserved.