原生select下拉框添加數據過濾功能

1.引入select2插件實現數據過濾

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    <!--    <link href="./select2.css" rel="stylesheet" /> -->
        <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
        <link  rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <title>select2測試</title>
    </head>
    <body>
        <select class="singleSelect" style="width: 220px;height:40px;" id="userId">
            <option value="">--請選擇--</option>
        </select>
    <!--    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
        <script src="./select2.js"></script> -->
        <script type="text/javascript">
            let selectArr = [{
                    "id": 1,
                    "text": "江南"
                },
                {
                    "id": 2,
                    "text": "杭州"
                },
                {
                    "id": 3,
                    "text": "上海"
                },
                {
                    "id": 4,
                    "text": "北京"
                },
                {
                    "id": 5,
                    "text": "深圳"
                },
                {
                    "id": 6,
                    "text": "浙江"
                },
                {
                    "id": 7,
                    "text": "河南"
                },
                {
                    "id": 8,
                    "text": "江蘇"
                }
            ];
            $(document).ready(function() { //加載頁面時執行select2
                $('#userId').select2({
                    language: {
                        noResults: function(params) {
                            return "未找到該數據";
                        }
                    },
                    placeholder: "請選擇",
                    allowClear: false,//是否開啟刪除按鈕
                    data: selectArr
                });
                //獲取當前選中項的值的值
                $('#userId').change(function(){
                    console.log('當前選擇',$("#userId option:checked").val(),$("#userId option:checked").text());
                });
                //select2數據回顯  如要顯示河南 只需要將河南對應的id傳進去就行
                 $('#userId').val(7).trigger('change');

            });
        </script>
    </body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容