jQuery Chosen是一款非常方便的jQuery插件,它能夠讓用戶在下拉框中選中多個(gè)選項(xiàng)。不同于標(biāo)準(zhǔn)HTML下拉框,Chosen插件支持搜索、排序等高級(jí)功能。
使用Chosen插件,你需要先引入相應(yīng)的CSS和JS文件,可以在官網(wǎng)上下載相應(yīng)的版本。在HTML中,你需要為需要使用Chosen的下拉框加上class名為"chosen-select"。當(dāng)然,你還可以使用其他的class名,這將通過JS代碼進(jìn)行指定。
<link rel="stylesheet" href="chosen.css"> <script src="jquery.js"></script> <script src="chosen.jquery.js"></script> <select class="chosen-select"> <option value="option1">選項(xiàng)1</option> <option value="option2">選項(xiàng)2</option> <option value="option3">選項(xiàng)3</option> </select> <script> $(".chosen-select").chosen(); </script>
如果你想要讓用戶能夠在同一個(gè)下拉框中選中多個(gè)選項(xiàng),你需要為下拉框加上屬性"multiple"。當(dāng)然,這并不是Chosen插件所支持的功能,因此還需要對(duì)多選框進(jìn)行一些自定義設(shè)置。
<select class="chosen-select" multiple> <option value="option1">選項(xiàng)1</option> <option value="option2">選項(xiàng)2</option> <option value="option3">選項(xiàng)3</option> </select> <script> $(".chosen-select").chosen({ max_selected_options: 3, placeholder_text_multiple: "請(qǐng)選擇3個(gè)以內(nèi)的選項(xiàng)" }); </script>
在上面的代碼中,我們通過max_selected_options屬性指定用戶最多能夠選擇的選項(xiàng)數(shù)量,并且通過placeholder_text_multiple屬性設(shè)置了多選框的提示信息。
總結(jié)來說,Chosen插件是一個(gè)非常實(shí)用且易于使用的jQuery插件,它不僅能夠大大提高用戶選項(xiàng)的體驗(yàn),同時(shí)也支持多種高級(jí)功能。如果你需要在頁(yè)面中使用下拉框,Chosen插件值得一試。
上一篇jquery cilck
下一篇華為 css主備倒置命令