>如果您的項(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來(lái)進(jìn)行更高級(jí)的功能和常規(guī)更新。 Select2還提供全面的文檔，使其更容易在項(xiàng)目中實(shí)施和使用。
- >安裝
- 選擇和Select2都可以通過GitHub獲得。這意味著您可以克隆各自的存儲(chǔ)庫(kù)并獲取所需的文件。
否則，您可以將兩個(gè)插件與Bower安裝（作為GitHub的接口）。如果鮑爾是您的首選路線，那么您不妨在使用時(shí)抓住jQuery。
否則，從您選擇的CDN（例如CDNJ）中獲取文件，并以通常的方式將它們包含在頁(yè)面中。這是我在下面的模板中所做的，您可以使用此操作以及教程中的示例。
選擇
<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頁(yè)面來(lái)確定，所選插件的開發(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和選擇更改簡(jiǎn)單的方式，并出現(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)是您可以非常簡(jiǎn)單地更改選擇數(shù)量。
>您可以限制可以從兩個(gè)插件的多選盒中選擇的選擇數(shù)量，盡管值得注意的是，選擇此功能的版本更為先進(jìn)。達(dá)到限制后，如果您嘗試選擇一個(gè)調(diào)用事件的其他選項(xiàng)。 >請(qǐng)參閱Pen的選擇數(shù)量有限的選擇：codepen上的sitepoint（@sitepoint）選擇的選擇。 >人們會(huì)在各種設(shè)備上看到您的頁(yè)面，因此選擇框，就像您網(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é)果。
> >以不同的字母為不同的語(yǔ)言編寫了大量網(wǎng)站，除此之外，其中一些語(yǔ)言是從另一個(gè)方向讀取的。建議精選的框應(yīng)根據(jù)這些語(yǔ)言的規(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中的選定選擇類一起添加。 >
>
如果選擇范圍很大，并且您無(wú)法在選項(xiàng)列表中鍵入所有選擇時(shí)，
>
>將標(biāo)簽設(shè)置為true后，可用包含令牌分隔符的選項(xiàng)可用。輸入標(biāo)簽的名稱后，只需鍵入指定的令牌分離器之一。然后將標(biāo)簽作為選項(xiàng)列表中的選擇輸入。令牌分離器是通過從鍵盤中鍵入字符來(lái)創(chuàng)建標(biāo)簽的快捷方式。 >在Select2的幫助下，您可以使用所需的任何字符創(chuàng)建令牌分離器。在下面的示例中，使用了四個(gè)令牌分離器： /，，，;和“”（Space）。 >通過鍵入一個(gè)新選項(xiàng)，然后是一個(gè)分隔符字符來(lái)選擇它并將其添加到選項(xiàng)列表：
結(jié)論 >
>
以實(shí)現(xiàn)Select2，您首先需要在項(xiàng)目中包括Select2 CSS和JavaScript文件。然后，您可以使用$（“ MySelectBox”）。select2（）在任何選擇框上初始化select2;命令。您還可以通過將選項(xiàng)傳遞到select2（）函數(shù)來(lái)自定義Select2的行為。 ，而從技術(shù)上講可以同時(shí)使用和select2在同一項(xiàng)目中，通常不建議進(jìn)行。這兩個(gè)插件旨在增強(qiáng)選定框的功能，并將它們一起使用可能導(dǎo)致沖突和意外行為。最好選擇最適合您需求的一種。 select2和選擇允許通過CSS進(jìn)行廣泛的自定義。您可以通過在您自己的CSS文件中覆蓋其默認(rèn)樣式來(lái)更改外觀的顏色，字體，尺寸和其他方面。 >我可以將所選或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)。您可以看到殘疾人的選擇，但無(wú)法選擇它們。通常設(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來(lái)做到這一點(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è)屬性來(lái)啟用此功能。當(dāng)啟用多個(gè)選擇時(shí)，用戶可以從選擇框中選擇多個(gè)選項(xiàng)。>我可以使用移動(dòng)設(shè)備選擇或選擇2使用？
我如何處理Select2并選擇的事件？您可以聆聽和回應(yīng)的事件。例如，您可以在用戶選擇時(shí)聆聽更改事件以運(yùn)行功能。您可以使用jQuery中的.on（）方法來(lái)連接事件偵聽器。
>
以上是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)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
如何在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模塊無(wú)需依賴，適合基礎(chǔ)場(chǎng)景，但需手動(dòng)處理數(shù)據(jù)拼接和錯(cuò)誤監(jiān)聽，例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請(qǐng)求；2.axios是基于Promise的第三方庫(kù)，語(yǔ)法簡(jiǎn)潔且功能強(qiáng)大，支持async/await、自動(dòng)JSON轉(zhuǎn)換、攔截器等，推薦用于簡(jiǎn)化異步請(qǐng)求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基于Promise且語(yǔ)法簡(jiǎn)單
JavaScript數(shù)據(jù)類型：原始與參考
Jul 13, 2025 am 02:43 AM
JavaScript的數(shù)據(jù)類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol，其值不可變且賦值時(shí)復(fù)制副本，因此互不影響；引用類型如對(duì)象、數(shù)組和函數(shù)存儲(chǔ)的是內(nèi)存地址，指向同一對(duì)象的變量會(huì)相互影響。判斷類型可用typeof和instanceof，但需注意typeofnull的歷史問題。理解這兩類差異有助于編寫更穩(wěn)定可靠的代碼。
JavaScript時(shí)間對(duì)象，某人構(gòu)建了一個(gè)eactexe，在Google Chrome上更快的網(wǎng)站等等
Jul 08, 2025 pm 02:27 PM
JavaScript開發(fā)者們，大家好！歡迎閱讀本周的JavaScript新聞！本周我們將重點(diǎn)關(guān)注：Oracle與Deno的商標(biāo)糾紛、新的JavaScript時(shí)間對(duì)象獲得瀏覽器支持、GoogleChrome的更新以及一些強(qiáng)大的開發(fā)者工具。讓我們開始吧！Oracle與Deno的商標(biāo)之爭(zhēng)Oracle試圖注冊(cè)“JavaScript”商標(biāo)的舉動(dòng)引發(fā)爭(zhēng)議。Node.js和Deno的創(chuàng)建者RyanDahl已提交請(qǐng)?jiān)笗?，要求取消該商?biāo)，他認(rèn)為JavaScript是一個(gè)開放標(biāo)準(zhǔn)，不應(yīng)由Oracle
什么是緩存API？如何與服務(wù)人員使用？
Jul 08, 2025 am 02:43 AM
CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請(qǐng)求的工具，常與ServiceWorker配合使用，以提升網(wǎng)站性能和離線體驗(yàn)。1.它允許開發(fā)者手動(dòng)存儲(chǔ)如腳本、樣式表、圖片等資源；2.可根據(jù)請(qǐng)求匹配緩存響應(yīng)；3.支持刪除特定緩存或清空整個(gè)緩存；4.通過ServiceWorker監(jiān)聽fetch事件實(shí)現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略；5.常用于離線支持、加快重復(fù)訪問速度、預(yù)加載關(guān)鍵資源及后臺(tái)更新內(nèi)容；6.使用時(shí)需注意緩存版本控制、存儲(chǔ)限制及與HTTP緩存機(jī)制的區(qū)別。
處理諾言：鏈接，錯(cuò)誤處理和承諾在JavaScript中
Jul 08, 2025 am 02:40 AM
Promise是JavaScript中處理異步操作的核心機(jī)制，理解鏈?zhǔn)秸{(diào)用、錯(cuò)誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。1.鏈?zhǔn)秸{(diào)用通過.then()返回新Promise實(shí)現(xiàn)異步流程串聯(lián)，每個(gè).then()接收上一步結(jié)果并可返回值或Promise；2.錯(cuò)誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常，避免靜默失敗，并可在catch中返回默認(rèn)值繼續(xù)流程；3.組合器如Promise.all()（全成功才成功）、Promise.race()（首個(gè)完成即返回）和Promise.allSettled()（等待所有完成）
利用Array.Prototype方法用于JavaScript中的數(shù)據(jù)操作
Jul 06, 2025 am 02:36 AM
JavaScript數(shù)組內(nèi)置方法如.map()、.filter()和.reduce()可簡(jiǎn)化數(shù)據(jù)處理；1）.map()用于一對(duì)一轉(zhuǎn)換元素生成新數(shù)組；2）.filter()按條件篩選元素；3）.reduce()用于聚合數(shù)據(jù)為單一值；使用時(shí)應(yīng)避免誤用導(dǎo)致副作用或性能問題。
JS綜述：深入研究JavaScript事件循環(huán)
Jul 08, 2025 am 02:24 AM
JavaScript的事件循環(huán)通過協(xié)調(diào)調(diào)用棧、WebAPI和任務(wù)隊(duì)列來(lái)管理異步操作。1.調(diào)用棧執(zhí)行同步代碼，遇到異步任務(wù)時(shí)交由WebAPI處理；2.WebAPI在后臺(tái)完成任務(wù)后將回調(diào)放入相應(yīng)的隊(duì)列（宏任務(wù)或微任務(wù)）；3.事件循環(huán)檢查調(diào)用棧是否為空，若為空則從隊(duì)列中取出回調(diào)推入調(diào)用棧執(zhí)行；4.微任務(wù)（如Promise.then）優(yōu)先于宏任務(wù)（如setTimeout）執(zhí)行；5.理解事件循環(huán)有助于避免阻塞主線程并優(yōu)化代碼執(zhí)行順序。
了解事件在JavaScript DOM事件中冒泡和捕獲
Jul 08, 2025 am 02:36 AM
事件冒泡是從目標(biāo)元素向外傳播到祖先節(jié)點(diǎn)，事件捕獲則是從外層向內(nèi)傳播到目標(biāo)元素。1.事件冒泡：點(diǎn)擊子元素后，事件依次向上觸發(fā)父級(jí)元素的監(jiān)聽器，例如點(diǎn)擊按鈕后先輸出Childclicked，再輸出Parentclicked。2.事件捕獲：設(shè)置第三個(gè)參數(shù)為true，使監(jiān)聽器在捕獲階段執(zhí)行，如點(diǎn)擊按鈕前先觸發(fā)父元素的捕獲監(jiān)聽器。3.實(shí)際用途包括統(tǒng)一管理子元素事件、攔截預(yù)處理和性能優(yōu)化。4.DOM事件流分為捕獲、目標(biāo)和冒泡三個(gè)階段，默認(rèn)監(jiān)聽器在冒泡階段執(zhí)行。
