>如果您的項(xiàng)目包含不吸引人的選擇框，并且您想向其添加更多功能，則會(huì)發(fā)現(xiàn)選擇和Select2非常有用。這是兩個(gè)jQuery插件，可幫助您設(shè)計(jì)選擇框以改善其外觀，自定義其行為并使它們更友好。
>>在本文中，我將把這兩個(gè)插件正對(duì)準(zhǔn)，并比較它們的功能和用例，以便您可以做出最適合您的選擇。
鑰匙要點(diǎn)
選擇和Select2是jQuery插件，可增強(qiáng)選擇框的功能，從而提高其外觀和用戶友好性。雖然選擇是一個(gè)可靠且堅(jiān)固的插件，但它并不像Select2那樣積極地維護(hù)，該插件定期添加新功能和集成。
>- >兩個(gè)插件都支持占位符文本，允許在選項(xiàng)中進(jìn)行搜索，并提供限制選擇數(shù)量的能力。但是，Select2還提供了在打開下拉列表時(shí)取消選擇選項(xiàng)的選項(xiàng)，尚未在所選中實(shí)現(xiàn)的功能。
- > select2脫穎而出，其其他功能，包括程序化訪問，標(biāo)記，令牌化和模板。它還支持Ajax并提供更高級(jí)的自定義選項(xiàng)，使其成為選擇框的功能更強(qiáng)大的工具。
- >選擇是基本選擇盒增強(qiáng)功能的一個(gè)不錯(cuò)的選擇，但建議使用Select2來進(jìn)行更高級(jí)的功能和常規(guī)更新。 Select2還提供全面的文檔，使其更容易在項(xiàng)目中實(shí)施和使用。
- >安裝
- 選擇和Select2都可以通過GitHub獲得。這意味著您可以克隆各自的存儲(chǔ)庫并獲取所需的文件。
否則，您可以將兩個(gè)插件與Bower安裝（作為GitHub的接口）。如果鮑爾是您的首選路線，那么您不妨在使用時(shí)抓住jQuery。
否則，從您選擇的CDN（例如CDNJ）中獲取文件，并以通常的方式將它們包含在頁面中。這是我在下面的模板中所做的，您可以使用此操作以及教程中的示例。
選擇
<span>git clone https://github.com/harvesthq/chosen.git </span><span>git clone https://github.com/select2/select2.git </span>
select2
bower <span>install jquery </span>bower <span>install select2 </span>bower <span>install chosen </span>
項(xiàng)目是否積極維護(hù)？
>您可以通過訪問其GitHub頁面來確定，所選插件的開發(fā)并不像以前那樣活躍，并且是2014年2月6日所選日期的最新版本。這并不是說圖書館已經(jīng)存在被遺棄 - 遠(yuǎn)離它！相反，開發(fā)人員將其帶到了他們想要的地方，并且仍然是一個(gè)可靠且強(qiáng)大的插件。 另一方面，與select2相比，對(duì)比了，差異很明顯。該圖書館的開發(fā)將全力以赴，最近發(fā)布了其官方的第四版（4.0.0）。這意味著正在添加新功能，而其他功能則被棄用和/或刪除。
>另一個(gè)有用的指標(biāo)可能是在堆棧溢出上使用這些標(biāo)簽的問題數(shù)量。您可以在這里親自嘗試：http：//stackoverflow.com/tags
>如果您輸入“ select2”，然后對(duì)比“選擇”，您會(huì)發(fā)現(xiàn)Select2插件周圍似乎還有更多活動(dòng)。您還會(huì)看到它具有許多集成，例如AngularJS和Ruby在Rails上。
選擇盒子和占位符
select2和選擇更改簡單的方式，并出現(xiàn)多個(gè)選擇框。
在帶有純HTML的多個(gè)選擇框中，用戶可以看到列表中可用的一些選項(xiàng)。這不是視覺上吸引人的，必須對(duì)此觀點(diǎn)進(jìn)行更改。選擇和select2刪除“列表視圖”，當(dāng)您在“選擇框”內(nèi)單擊時(shí)，將出現(xiàn)選項(xiàng)列表。只有這樣，您才能進(jìn)行選擇。>您可以使用兩個(gè)插件搜索您的選項(xiàng)。只需單擊框內(nèi)，然后輸入您選擇的第一個(gè)字符，然后根據(jù)您的搜索實(shí)時(shí)出現(xiàn)結(jié)果。
select2使得更容易取消選擇已經(jīng)選擇的選項(xiàng)。打開下拉列表時(shí)，您可以單擊任何選定的元素以取消選擇。選定尚未實(shí)現(xiàn)此功能。
>
選擇的單個(gè)和多個(gè)選擇框的選擇和Select2支持占位符文本。選擇數(shù)量有限
>有時(shí)在一個(gè)多個(gè)選擇框中，您需要限制“選項(xiàng)”用戶選擇的數(shù)量。使用選擇和Select2的優(yōu)點(diǎn)是您可以非常簡單地更改選擇數(shù)量。
>您可以限制可以從兩個(gè)插件的多選盒中選擇的選擇數(shù)量，盡管值得注意的是，選擇此功能的版本更為先進(jìn)。達(dá)到限制后，如果您嘗試選擇一個(gè)調(diào)用事件的其他選項(xiàng)。 >請(qǐng)參閱Pen的選擇數(shù)量有限的選擇：codepen上的sitepoint（@sitepoint）選擇的選擇。 >人們會(huì)在各種設(shè)備上看到您的頁面，因此選擇框，就像您網(wǎng)站的其他組件一樣，應(yīng)該響應(yīng)能力。所選和Select2支持設(shè)置寬度的百分比都具有一個(gè)百分比，并且兩者的功能幾乎相同。這有助于創(chuàng)建響應(yīng)式選擇的框，以考慮屏幕尺寸或?yàn)g覽器窗口寬度。 >選擇和Select2對(duì)此功能的唯一區(qū)別是代碼。您可以在HTML中聲明Select2的select標(biāo)簽。在下面查看它，以了解使Select Select Box響應(yīng)能力和視覺上更好的方便。
為了讓插件知道您已經(jīng)激活了禁用的結(jié)果，請(qǐng)?jiān)谶x項(xiàng)標(biāo)簽中添加屬性=“ disabled”，您將在其中使用此功能。
在此選定的示例中，用戶只能在其地理位置中選擇可用的選項(xiàng)，但是即使它們不可用，它們也可以看到其他選項(xiàng)： 上的禁用結(jié)果。
> >以不同的字母為不同的語言編寫了大量網(wǎng)站，除此之外，其中一些語言是從另一個(gè)方向讀取的。建議精選的框應(yīng)根據(jù)這些語言的規(guī)則進(jìn)行調(diào)整，并將其方向從LTR（從左到右）轉(zhuǎn)移到RTL。這可以改善用戶體驗(yàn)，并提高您網(wǎng)站對(duì)該地區(qū)用戶的可用性。 選擇和Select2在Select Box中支持左右技術(shù)。他們唯一的區(qū)別是Select2需要您在JavaScript文件中聲明RTL支持，與此同時(shí)，您只需將所選的RTL類與HTML中的選定選擇類一起添加。 >
>
如果選擇范圍很大，并且您無法在選項(xiàng)列表中鍵入所有選擇時(shí)，
>
>將標(biāo)簽設(shè)置為true后，可用包含令牌分隔符的選項(xiàng)可用。輸入標(biāo)簽的名稱后，只需鍵入指定的令牌分離器之一。然后將標(biāo)簽作為選項(xiàng)列表中的選擇輸入。令牌分離器是通過從鍵盤中鍵入字符來創(chuàng)建標(biāo)簽的快捷方式。 >在Select2的幫助下，您可以使用所需的任何字符創(chuàng)建令牌分離器。在下面的示例中，使用了四個(gè)令牌分離器： /，，，;和“”（Space）。 >通過鍵入一個(gè)新選項(xiàng)，然后是一個(gè)分隔符字符來選擇它并將其添加到選項(xiàng)列表：
結(jié)論 >
>
以實(shí)現(xiàn)Select2，您首先需要在項(xiàng)目中包括Select2 CSS和JavaScript文件。然后，您可以使用$（“ MySelectBox”）。select2（）在任何選擇框上初始化select2;命令。您還可以通過將選項(xiàng)傳遞到select2（）函數(shù)來自定義Select2的行為。 ，而從技術(shù)上講可以同時(shí)使用和select2在同一項(xiàng)目中，通常不建議進(jìn)行。這兩個(gè)插件旨在增強(qiáng)選定框的功能，并將它們一起使用可能導(dǎo)致沖突和意外行為。最好選擇最適合您需求的一種。 select2和選擇允許通過CSS進(jìn)行廣泛的自定義。您可以通過在您自己的CSS文件中覆蓋其默認(rèn)樣式來更改外觀的顏色，字體，尺寸和其他方面。 >我可以將所選或select2與Angular或React這樣的框架使用？ 選擇的是內(nèi)置的搜索功能。當(dāng)您在選擇框中選擇的初始化時(shí)，會(huì)自動(dòng)添加搜索框。用戶可以在此框中鍵入此框以過濾選擇框中的選項(xiàng)。響應(yīng)式設(shè)計(jì)
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chosen/Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
</head>
<body>
<script></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<script>// Additional logic goes here</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
</head>
<body>
<script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script>// Additional logic goes here</script>
</body>
</html>
其他類似的功能
>選擇和Select2具有其他共同的功能，但是我想查看我發(fā)現(xiàn)有趣的三個(gè)功能：殘疾人結(jié)果，隱藏的搜索框以及左右（RTL）支持。
最有趣的是殘疾人結(jié)果。使用此選項(xiàng)集，選擇和Select2突出顯示了已啟用的選項(xiàng)。您可以看到殘疾人的選擇，但無法選擇它們。通常設(shè)置禁用結(jié)果，以防止用戶選擇該選項(xiàng)，直到滿足其他條件為止。此功能將您的選擇框變成一個(gè)功能強(qiáng)大的工具，如果您根據(jù)需要學(xué)習(xí)如何使用它，它會(huì)增加與用戶的互動(dòng)。
<span>max_selected_options: 2 // Chosen Plugin
</span>
>請(qǐng)參閱codepen上的sitepoint（@sitepoint）的筆選擇的筆：
<span>maximumSelectionLength: 2 // Select2 Plugin
</span>
<!-- Chosen - HTML -->
<select >
...
</select>
>我應(yīng)該添加有關(guān)Select2的一件事是，您可以永久隱藏搜索框，而不必?fù)?dān)心選擇框中的選項(xiàng)數(shù)量。您可以通過將MinimumResultsForsearch設(shè)置為Infinity來做到這一點(diǎn)。
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
>左右（RTL）支撐
> select2受到選擇的啟發(fā)，并且具有所選的大多數(shù)功能，但其貢獻(xiàn)者并沒有止步于此。它們構(gòu)建了一些最酷的功能，用于選擇框，包括程序化訪問，模板，禁用模式，標(biāo)記和令牌化。它還支持Ajax。
程序化訪問將選擇框帶到另一個(gè)級(jí)別。它們非常有用，與多個(gè)精選框結(jié)合在一起。您可以使用JavaScript添加根據(jù)規(guī)則在這些選擇框上作用的按鈕。
bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chosen/Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
</head>
<body>
<script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<script>// Additional logic goes here</script>
</body>
</html>
在此示例中，您可以通過單擊“ iOS Technologies”按鈕快速設(shè)置“ Swift”和“ Objective-C”：
標(biāo)記是Select2的另一個(gè)功能，它使Select框更強(qiáng)大，并擴(kuò)展了普通選擇框的限制。它允許用戶添加尚未在選項(xiàng)列表中的新選擇。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
</head>
<body>
<script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script>// Additional logic goes here</script>
</body>
</html>
>請(qǐng)參閱codepen上的sitepoint（@sitepoint）標(biāo)記的筆選擇的筆。
tokenization
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
> Select2最強(qiáng)大的功能之一是模板。模板使我們能夠自定義Select2顯示的組件的外觀。此功能可用于合并選項(xiàng)標(biāo)簽提供的最小輸入與圖像或其他組件為用戶創(chuàng)建視覺顯示。 >盡管其中選擇有一些不錯(cuò)的選擇，但是Select2提供了更多的可用功能，可與Select Box一起使用。如果您將其組合在網(wǎng)站的“流”中，則選擇是一個(gè)不錯(cuò)的選擇，但是如果您想訪問更高級(jí)的功能，那么Select2是更好的選擇。
>我強(qiáng)烈建議使用select2;它的更新頻率比所選擇的頻率更高，并且錯(cuò)誤更少。我發(fā)現(xiàn)對(duì)Select2的文檔非常有幫助。在閱讀它時(shí)，您可以隨時(shí)使用項(xiàng)目中的select2組件。>如何在項(xiàng)目中實(shí)現(xiàn)select2？
>我可以在同一項(xiàng)目中使用所選和select2嗎？
我如何自定義Select2的外觀并選擇？
如何使用Select2？非常適合處理大型數(shù)據(jù)集的AJAX支持。您可以將Select2配置為隨著用戶類型即時(shí)獲取數(shù)據(jù)，從而阻止需要預(yù)先加載所有數(shù)據(jù)。與大型數(shù)據(jù)集一起工作時(shí)，這可以顯著提高性能。
>如何使用select2和選擇多個(gè)選擇？
select2和選擇支持多個(gè)選擇。您可以通過在選擇框中添加多個(gè)屬性來啟用此功能。當(dāng)啟用多個(gè)選擇時(shí)，用戶可以從選擇框中選擇多個(gè)選項(xiàng)。>我可以使用移動(dòng)設(shè)備選擇或選擇2使用？
我如何處理Select2并選擇的事件？您可以聆聽和回應(yīng)的事件。例如，您可以在用戶選擇時(shí)聆聽更改事件以運(yùn)行功能。您可以使用jQuery中的.on（）方法來連接事件偵聽器。
>
以上是jQuery選擇框組件 - 選擇vs select2的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)象有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫；4.處理時(shí)區(qū)問題建議使用支持時(shí)區(qū)的庫，如Luxon。掌握這些要點(diǎn)能有效避免常見錯(cuò)誤。
為什么要將標(biāo)簽放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
什么是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委托，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用于提前攔截事件，如日志記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助于精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
如何減少JavaScript應(yīng)用程序的有效載荷大?。?/a>
JavaScript模塊上的確定JS綜述：ES模塊與COMPORJS
Jul 02, 2025 am 01:28 AM
ES模塊和CommonJS的主要區(qū)別在于加載方式和使用場景。1.CommonJS是同步加載，適用于Node.js服務(wù)器端環(huán)境；2.ES模塊是異步加載，適用于瀏覽器等網(wǎng)絡(luò)環(huán)境；3.語法上，ES模塊使用import/export，且必須位于頂層作用域，而CommonJS使用require/module.exports，可在運(yùn)行時(shí)動(dòng)態(tài)調(diào)用；4.CommonJS廣泛用于舊版Node.js及依賴它的庫如Express，ES模塊則適用于現(xiàn)代前端框架和Node.jsv14 ；5.雖然可混合使用，但容易引發(fā)問題
如何在node.js中提出HTTP請(qǐng)求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請(qǐng)求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。1.使用內(nèi)置的http/https模塊無需依賴，適合基礎(chǔ)場景，但需手動(dòng)處理數(shù)據(jù)拼接和錯(cuò)誤監(jiān)聽，例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請(qǐng)求；2.axios是基于Promise的第三方庫，語法簡潔且功能強(qiáng)大，支持async/await、自動(dòng)JSON轉(zhuǎn)換、攔截器等，推薦用于簡化異步請(qǐng)求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基于Promise且語法簡單
垃圾收集如何在JavaScript中起作用？
Jul 04, 2025 am 12:42 AM
JavaScript的垃圾回收機(jī)制通過標(biāo)記-清除算法自動(dòng)管理內(nèi)存，以減少內(nèi)存泄漏風(fēng)險(xiǎn)。引擎從根對(duì)象出發(fā)遍歷并標(biāo)記活躍對(duì)象，未被標(biāo)記的則被視為垃圾并被清除。例如，當(dāng)對(duì)象不再被引用（如將變量設(shè)為null），它將在下一輪回收中被釋放。常見的內(nèi)存泄漏原因包括：①未清除的定時(shí)器或事件監(jiān)聽器；②閉包中對(duì)外部變量的引用；③全局變量持續(xù)持有大量數(shù)據(jù)。V8引擎通過分代回收、增量標(biāo)記、并行/并發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時(shí)間。開發(fā)時(shí)應(yīng)避免不必要的全局引用、及時(shí)解除對(duì)象關(guān)聯(lián)，以提升性能與穩(wěn)定性。
var vs Let vs const：快速JS綜述解釋器
Jul 02, 2025 am 01:18 AM
var、let和const的區(qū)別在于作用域、提升和重復(fù)聲明。1.var是函數(shù)作用域，存在變量提升，允許重復(fù)聲明；2.let是塊級(jí)作用域，存在暫時(shí)性死區(qū)，不允許重復(fù)聲明；3.const也是塊級(jí)作用域，必須立即賦值，不可重新賦值，但可修改引用類型的內(nèi)部值。優(yōu)先使用const，需改變變量時(shí)用let，避免使用var。
