jQuery 下拉框選(select)是一個(gè)常見的交互組件,可以讓用戶在多個(gè)選項(xiàng)中進(jìn)行選擇。但有時(shí)選項(xiàng)特別多,用戶需要不停地滾動(dòng)來尋找自己想要選擇的選項(xiàng),這時(shí)我們就可以用 jQuery 的輸入下拉框選(select2)插件來簡化用戶的選擇操作。
輸入下拉框選支持用戶對下拉菜單進(jìn)行搜索和篩選,只需要在輸入框中輸入相關(guān)內(nèi)容就能快速定位到所需選項(xiàng),方便快捷。
//引入select2插件 <link rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> // 初始化select2插件 $('select').select2({ minimumInputLength: 1 //最小輸入長度為1 });
以上代碼是引入和初始化輸入下拉框選的方式,通過將select元素選擇器傳入select2函數(shù)進(jìn)行初始化即可。其中minimumInputLength參數(shù)表示最小輸入長度,只有輸入內(nèi)容長度達(dá)到此值才會(huì)開始進(jìn)行篩選。此外,select2還支持自定義樣式、ajax加載等高級(jí)特性需要根據(jù)具體需求使用。