jQuery Chosen是一個(gè)非常實(shí)用的Javascript庫(kù),可以很方便地實(shí)現(xiàn)下拉列表的功能。它可以提供多選功能,非常方便。以下是如何使用jQuery Chosen實(shí)現(xiàn)多選的方法。
<select id="multiple-select" multiple> <option value="1">選項(xiàng)1</option> <option value="2">選項(xiàng)2</option> <option value="3">選項(xiàng)3</option> <option value="4">選項(xiàng)4</option> <option value="5">選項(xiàng)5</option> </select> <script type="text/javascript"> $("#multiple-select").chosen({width:"100%"}); </script>
代碼解釋:
1. 首先我們有一個(gè)下拉列表,我們給它一個(gè)id為"multiple-select"。在這個(gè)列表中有5個(gè)選項(xiàng)。
2. 我們使用jQuery選擇器選中了這個(gè)下拉列表,并調(diào)用chosen方法來(lái)初始化它。
3. 在chosen方法的參數(shù)中,我們?cè)O(shè)置了一個(gè)width屬性,為100%。這個(gè)屬性可以讓下拉列表選擇框的寬度與父容器寬度相同,看起來(lái)更美觀一些。
在以上代碼的基礎(chǔ)上,就可以實(shí)現(xiàn)帶有多選功能的下拉列表了。當(dāng)你點(diǎn)擊選擇框時(shí),一個(gè)多選列表會(huì)彈出來(lái),你可以選擇多個(gè)選項(xiàng)。選擇后,選擇框中會(huì)顯示選中的選項(xiàng)。這是在項(xiàng)目中實(shí)現(xiàn)多選功能的一種不錯(cuò)的方式。