>如果您的項目包含不吸引人的選擇框，並且您想向其添加更多功能，則會發(fā)現(xiàn)選擇和Select2非常有用。這是兩個jQuery插件，可幫助您設(shè)計選擇框以改善其外觀，自定義其行為並使它們更友好。
>>在本文中，我將把這兩個插件正對準(zhǔn)，並比較它們的功能和用例，以便您可以做出最適合您的選擇。
鑰匙要點
選擇和Select2是jQuery插件，可增強選擇框的功能，從而提高其外觀和用戶友好性。雖然選擇是一個可靠且堅固的插件，但它並不像Select2那樣積極地維護，該插件定期添加新功能和集成。
>- >兩個插件都支持佔位符文本，允許在選項中進行搜索，並提供限制選擇數(shù)量的能力。但是，Select2還提供了在打開下拉列表時取消選擇選項的選項，尚未在所選中實現(xiàn)的功能。
- > select2脫穎而出，其其他功能，包括程序化訪問，標(biāo)記，令牌化和模板。它還支持Ajax並提供更高級的自定義選項，使其成為選擇框的功能更強大的工具。
- >選擇是基本選擇盒增強功能的一個不錯的選擇，但建議使用Select2來進行更高級的功能和常規(guī)更新。 Select2還提供全面的文檔，使其更容易在項目中實施和使用。
- >安裝
- 選擇和Select2都可以通過GitHub獲得。這意味著您可以克隆各自的存儲庫並獲取所需的文件。
否則，您可以將兩個插件與Bower安裝（作為GitHub的接口）。如果鮑爾是您的首選路線，那麼您不妨在使用時抓住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>
項目是否積極維護？
>您可以通過訪問其GitHub頁面來確定，所選插件的開發(fā)並不像以前那樣活躍，並且是2014年2月6日所選日期的最新版本。這並不是說圖書館已經(jīng)存在被遺棄 - 遠離它！相反，開發(fā)人員將其帶到了他們想要的地方，並且仍然是一個可靠且強大的插件。 另一方面，與select2相比，對比了，差異很明顯。該圖書館的開發(fā)將全力以赴，最近發(fā)布了其官方的第四版（4.0.0）。這意味著正在添加新功能，而其他功能則被棄用和/或刪除。
>另一個有用的指標(biāo)可能是在堆棧溢出上使用這些標(biāo)籤的問題數(shù)量。您可以在這裡親自嘗試：http：//stackoverflow.com/tags
>如果您輸入“ select2”，然後對比“選擇”，您會發(fā)現(xiàn)Select2插件周圍似乎還有更多活動。您還會看到它具有許多集成，例如AngularJS和Ruby在Rails上。
選擇盒子和占位符
select2和選擇更改簡單的方式，並出現(xiàn)多個選擇框。
在帶有純HTML的多個選擇框中，用戶可以看到列表中可用的一些選項。這不是視覺上吸引人的，必須對此觀點進行更改。選擇和select2刪除“列表視圖”，當(dāng)您在“選擇框”內(nèi)單擊時，將出現(xiàn)選項列表。只有這樣，您才能進行選擇。>您可以使用兩個插件搜索您的選項。只需單擊框內(nèi)，然後輸入您選擇的第一個字符，然後根據(jù)您的搜索實時出現(xiàn)結(jié)果。
select2使得更容易取消選擇已經(jīng)選擇的選項。打開下拉列表時，您可以單擊任何選定的元素以取消選擇。選定尚未實現(xiàn)此功能。
>
選擇的單個和多個選擇框的選擇和Select2支持佔位符文本。選擇數(shù)量有限
>有時在一個多個選擇框中，您需要限制“選項”用戶選擇的數(shù)量。使用選擇和Select2的優(yōu)點是您可以非常簡單地更改選擇數(shù)量。
>您可以限制可以從兩個插件的多選盒中選擇的選擇數(shù)量，儘管值得注意的是，選擇此功能的版本更為先進。達到限制後，如果您嘗試選擇一個調(diào)用事件的其他選項。 >請參閱Pen的選擇數(shù)量有限的選擇：codepen上的sitepoint（@sitepoint）選擇的選擇。 >人們會在各種設(shè)備上看到您的頁面，因此選擇框，就像您網(wǎng)站的其他組件一樣，應(yīng)該響應(yīng)能力。所選和Select2支持設(shè)置寬度的百分比都具有一個百分比，並且兩者的功能幾乎相同。這有助於創(chuàng)建響應(yīng)式選擇的框，以考慮屏幕尺寸或瀏覽器窗口寬度。 >選擇和Select2對此功能的唯一區(qū)別是代碼。您可以在HTML中聲明Select2的select標(biāo)籤。在下面查看它，以了解使Select Select Box響應(yīng)能力和視覺上更好的方便。
為了讓插件知道您已經(jīng)激活了禁用的結(jié)果，請在選項標(biāo)籤中添加屬性=“ disabled”，您將在其中使用此功能。
在此選定的示例中，用戶只能在其地理位置中選擇可用的選項，但是即使它們不可用，它們也可以看到其他選項： 上的禁用結(jié)果。
> >以不同的字母為不同的語言編寫了大量網(wǎng)站，除此之外，其中一些語言是從另一個方向讀取的。建議精選的框應(yīng)根據(jù)這些語言的規(guī)則進行調(diào)整，並將其方向從LTR（從左到右）轉(zhuǎn)移到RTL。這可以改善用戶體驗，並提高您網(wǎng)站對該地區(qū)用戶的可用性。 選擇和Select2在Select Box中支持左右技術(shù)。他們唯一的區(qū)別是Select2需要您在JavaScript文件中聲明RTL支持，與此同時，您只需將所選的RTL類與HTML中的選定選擇類一起添加。 >
>
如果選擇範(fàn)圍很大，並且您無法在選項列表中鍵入所有選擇時，
>
>將標(biāo)籤設(shè)置為true後，可用包含令牌分隔符的選項可用。輸入標(biāo)籤的名稱後，只需鍵入指定的令牌分離器之一。然後將標(biāo)籤作為選項列表中的選擇輸入。令牌分離器是通過從鍵盤中鍵入字符來創(chuàng)建標(biāo)籤的快捷方式。 >在Select2的幫助下，您可以使用所需的任何字符創(chuàng)建令牌分離器。在下面的示例中，使用了四個令牌分離器： /，，，;和“”（Space）。 >通過鍵入一個新選項，然後是一個分隔符字符來選擇它並將其添加到選項列表：
結(jié)論 >
>
以實現(xiàn)Select2，您首先需要在項目中包括Select2 CSS和JavaScript文件。然後，您可以使用$（“ MySelectBox”）。 select2（）在任何選擇框上初始化select2;命令。您還可以通過將選項傳遞到select2（）函數(shù)來自定義Select2的行為。 ，而從技術(shù)上講可以同時使用和select2在同一項目中，通常不建議進行。這兩個插件旨在增強選定框的功能，並將它們一起使用可能導(dǎo)致衝突和意外行為。最好選擇最適合您需求的一種。 select2和選擇允許通過CSS進行廣泛的自定義。您可以通過在您自己的CSS文件中覆蓋其默認(rèn)樣式來更改外觀的顏色，字體，尺寸和其他方面。 >我可以將所選或select2與Angular或React這樣的框架使用？ 選擇的是內(nèi)置的搜索功能。當(dāng)您在選擇框中選擇的初始化時，會自動添加搜索框。用戶可以在此框中鍵入此框以過濾選擇框中的選項。 響應(yīng)式設(shè)計
<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)有趣的三個功能：殘疾人結(jié)果，隱藏的搜索框以及左右（RTL）支持。
最有趣的是殘疾人結(jié)果。使用此選項集，選擇和Select2突出顯示了已啟用的選項。您可以看到殘疾人的選擇，但無法選擇它們。通常設(shè)置禁用結(jié)果，以防止用戶選擇該選項，直到滿足其他條件為止。此功能將您的選擇框變成一個功能強大的工具，如果您根據(jù)需要學(xué)習(xí)如何使用它，它會增加與用戶的互動。
<span>max_selected_options: 2 // Chosen Plugin
</span>
>請參閱codepen上的sitepoint（@sitepoint）的筆選擇的筆：
<span>maximumSelectionLength: 2 // Select2 Plugin
</span>
<!-- Chosen - HTML -->
<select >
...
</select>
>我應(yīng)該添加有關(guān)Select2的一件事是，您可以永久隱藏搜索框，而不必擔(dān)心選擇框中的選項數(shù)量。您可以通過將MinimumResultsForsearch設(shè)置為Infinity來做到這一點。
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
>左右（RTL）支撐
> select2受到選擇的啟發(fā)，並且具有所選的大多數(shù)功能，但其貢獻者並沒有止步於此。它們構(gòu)建了一些最酷的功能，用於選擇框，包括程序化訪問，模板，禁用模式，標(biāo)記和令牌化。它還支持Ajax。
程序化訪問將選擇框帶到另一個級別。它們非常有用，與多個精選框結(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的另一個功能，它使Select框更強大，並擴展了普通選擇框的限制。它允許用戶添加尚未在選項列表中的新選擇。 <!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>
>請參閱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最強大的功能之一是模板。模板使我們能夠自定義Select2顯示的組件的外觀。此功能可用於合併選項標(biāo)籤提供的最小輸入與圖像或其他組件為用戶創(chuàng)建視覺顯示。 >儘管其中選擇有一些不錯的選擇，但是Select2提供了更多的可用功能，可與Select Box一起使用。如果您將其組合在網(wǎng)站的“流”中，則選擇是一個不錯的選擇，但是如果您想訪問更高級的功能，那麼Select2是更好的選擇。
>我強烈建議使用select2;它的更新頻率比所選擇的頻率更高，並且錯誤更少。我發(fā)現(xiàn)對Select2的文檔非常有幫助。在閱讀它時，您可以隨時使用項目中的select2組件。 >如何在項目中實現(xiàn)select2？
>我可以在同一項目中使用所選和select2嗎？
我如何自定義Select2的外觀並選擇？
如何使用Select2？非常適合處理大型數(shù)據(jù)集的AJAX支持。您可以將Select2配置為隨著用戶類型即時獲取數(shù)據(jù)，從而阻止需要預(yù)先加載所有數(shù)據(jù)。與大型數(shù)據(jù)集一起工作時，這可以顯著提高性能。
>如何使用select2和選擇多個選擇？
select2和選擇支持多個選擇。您可以通過在選擇框中添加多個屬性來啟用此功能。當(dāng)啟用多個選擇時，用戶可以從選擇框中選擇多個選項。 >我可以使用移動設(shè)備選擇或選擇2使用？
我如何處理Select2並選擇的事件？您可以聆聽和回應(yīng)的事件。例如，您可以在用戶選擇時聆聽更改事件以運行功能。您可以使用jQuery中的.on（）方法來連接事件偵聽器。
>
以上是jQuery選擇框組件 - 選擇vs select2的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
垃圾收集如何在JavaScript中起作用？
Jul 04, 2025 am 12:42 AM
JavaScript的垃圾回收機制通過標(biāo)記-清除算法自動管理內(nèi)存，以減少內(nèi)存洩漏風(fēng)險。引擎從根對像出發(fā)遍歷並標(biāo)記活躍對象，未被標(biāo)記的則被視為垃圾並被清除。例如，當(dāng)對像不再被引用（如將變量設(shè)為null），它將在下一輪迴收中被釋放。常見的內(nèi)存洩漏原因包括：①未清除的定時器或事件監(jiān)聽器；②閉包中對外部變量的引用；③全局變量持續(xù)持有大量數(shù)據(jù)。 V8引擎通過分代回收、增量標(biāo)記、並行/並發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時間。開發(fā)時應(yīng)避免不必要的全局引用、及時解除對象關(guān)聯(lián)，以提升性能與穩(wěn)定性。
如何在node.js中提出HTTP請求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。 1.使用內(nèi)置的http/https模塊無需依賴，適合基礎(chǔ)場景，但需手動處理數(shù)據(jù)拼接和錯誤監(jiān)聽，例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請求；2.axios是基於Promise的第三方庫，語法簡潔且功能強大，支持async/await、自動JSON轉(zhuǎn)換、攔截器等，推薦用於簡化異步請求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基於Promise且語法簡單
JavaScript數(shù)據(jù)類型：原始與參考
Jul 13, 2025 am 02:43 AM
JavaScript的數(shù)據(jù)類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol，其值不可變且賦值時復(fù)制副本，因此互不影響；引用類型如對象、數(shù)組和函數(shù)存儲的是內(nèi)存地址，指向同一對象的變量會相互影響。判斷類型可用typeof和instanceof，但需注意typeofnull的歷史問題。理解這兩類差異有助於編寫更穩(wěn)定可靠的代碼。
React與Angular vs Vue：哪個JS框架最好？
Jul 05, 2025 am 02:24 AM
選哪個JavaScript框架最好？答案是根據(jù)需求選擇最適合的。 1.React靈活自由，適合需要高度定制、團隊有架構(gòu)能力的中大型項目；2.Angular提供完整解決方案，適合企業(yè)級應(yīng)用和長期維護的大項目；3.Vue上手簡單，適合中小型項目或快速開發(fā)。此外，是否已有技術(shù)棧、團隊規(guī)模、項目生命週期及是否需要SSR也都是選擇框架的重要因素?？傊?，沒有絕對最好的框架，適合自己需求的就是最佳選擇。
JavaScript時間對象，某人構(gòu)建了一個eactexe，在Google Chrome上更快的網(wǎng)站等等
Jul 08, 2025 pm 02:27 PM
JavaScript開發(fā)者們，大家好！歡迎閱讀本週的JavaScript新聞！本週我們將重點關(guān)注：Oracle與Deno的商標(biāo)糾紛、新的JavaScript時間對象獲得瀏覽器支持、GoogleChrome的更新以及一些強大的開發(fā)者工具。讓我們開始吧！ Oracle與Deno的商標(biāo)之爭Oracle試圖註冊“JavaScript”商標(biāo)的舉動引發(fā)爭議。 Node.js和Deno的創(chuàng)建者RyanDahl已提交請願書，要求取消該商標(biāo)，他認(rèn)為JavaScript是一個開放標(biāo)準(zhǔn)，不應(yīng)由Oracle
立即在JavaScript中立即調(diào)用功能表達式（IIFE）
Jul 04, 2025 am 02:42 AM
IIFE（ImmediatelyInvokedFunctionExpression）是一種在定義後立即執(zhí)行的函數(shù)表達式，用於變量隔離和避免污染全局作用域。它通過將函數(shù)包裹在括號中使其成為表達式，並緊隨其後的一對括號來調(diào)用，如(function(){/code/})();。其核心用途包括：1.避免變量衝突，防止多個腳本間的命名重複；2.創(chuàng)建私有作用域，使函數(shù)內(nèi)部變量不可見；3.模塊化代碼，便於初始化工作而不暴露過多變量。常見寫法包括帶參數(shù)傳遞的版本和ES6箭頭函數(shù)版本，但需注意：必須使用表達式、結(jié)
處理諾言：鏈接，錯誤處理和承諾在JavaScript中
Jul 08, 2025 am 02:40 AM
Promise是JavaScript中處理異步操作的核心機制，理解鍊式調(diào)用、錯誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。 1.鍊式調(diào)用通過.then()返回新Promise實現(xiàn)異步流程串聯(lián)，每個.then()接收上一步結(jié)果並可返回值或Promise；2.錯誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常，避免靜默失敗，並可在catch中返回默認(rèn)值繼續(xù)流程；3.組合器如Promise.all()（全成功才成功）、Promise.race()（首個完成即返回）和Promise.allSettled()（等待所有完成）
什麼是緩存API？如何與服務(wù)人員使用？
Jul 08, 2025 am 02:43 AM
CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請求的工具，常與ServiceWorker配合使用，以提升網(wǎng)站性能和離線體驗。 1.它允許開發(fā)者手動存儲如腳本、樣式表、圖片等資源；2.可根據(jù)請求匹配緩存響應(yīng)；3.支持刪除特定緩存或清空整個緩存；4.通過ServiceWorker監(jiān)聽fetch事件實現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略；5.常用於離線支持、加快重複訪問速度、預(yù)加載關(guān)鍵資源及後臺更新內(nèi)容；6.使用時需注意緩存版本控制、存儲限制及與HTTP緩存機制的區(qū)別。
