用例子解释 select和select2
两个jQuery插件,Chosen和Select2被用来设计选择框。它改善了选择框的外观,增强了它的行为,从而使它们更方便用户使用。它们既可用于单个选择框,也可用于多个选择框。
需要添加这些jQuery库。
激活选择框上的插件。
$(“.chosen-select”).chosen()
$(“.chosen-select”).select2()
Select2和Chosen之间的区别:
Select2可以通过点击下拉列表中的选定选项来取消先前选定的选项。但是selected没有这个功能,因为被选中的选项会褪色。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!--These jQuery libraries for
chosen need to be included-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />
<!--These jQuery libraries for select2
need to be included-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script>
(document).ready(function () {
//Select2
(".country").select2({
maximumSelectionLength: 2,
});
//Chosen
$(".country1").chosen({
max_selected_options: 2,
});
});
</script>
</head>
<body>
<form>
<h4>Selections using Select2</h4>
<select class="country"
multiple="true"
style="width: 200px;">
<option value="1">India</option>
<option value="2">Japan</option>
<option value="3">France</option>
</select>
<h4>Selections using Chosen</h4>
<select class="country1"
multiple="true"
style="width: 200px;">
<option value="1">India</option>
<option value="2">Japan</option>
<option value="3">France</option>
</select>
</form>
</body>
</html>
输出:
如果一些选项之间有一些联系,而且这些联系的选项被选中的概率很高,那么就可以通过使用Select2来完成单次点击。这在多选中非常有用。而 “选择 “不能进行这种逻辑链接。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!--These jQuery libraries for chosen
need to be included-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />
<!--These jQuery libraries for
select2 need to be included-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script>
(document).ready(function () {
//Select2
varprog = (".progLang").select2();
(".Front-end").on("click", function () {
prog.val(["ht", "js"]).trigger("change");
});
//Chosen
varprog1 = (".progLang1").chosen();
(".Front-end1").on("click", function () {
$prog1.val(["ht", "js"]).trigger("change");
});
});
</script>
</head>
<body>
<form>
<h4>Selections using Select2</h4>
<select class="progLang"
multiple="true"
style="width: 200px;">
<option value="py">Python</option>
<option value="ja">Java</option>
<option value="ht">HTML</option>
<option value="js">Javascript</option>
<option value="c">C++</option>
</select>
<input type="button"
class="Front-end"
value="set Front-end Technologies" />
<h4>Selections using Chosen</h4>
<select class="progLang1"
multiple="true"
style="width: 200px;">
<option value="py">Python</option>
<option value="ja">Java</option>
<option value="ht">HTML</option>
<option value="js">Javascript</option>
<option value="c">C++</option>
</select>
<input type="button"
class="Front-end1"
value="set Front-end Technologies" />
</form>
</body>
</html>
输出:
点击设置前端技术按钮后。
- Tagging
当你有一个广泛的选择,你不能包括所有的选择,那么就启用标签选项。这将使用户在选项中没有出现的情况下添加新的选择。这可以通过将标签选项设置为 “true “来实现。
这个选项在 “select2 “中可用,而在 “选择 “中用户不能向列表中添加新的选择。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!--These jQuery libraries for
chosen need to be included-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />
<!--These jQuery libraries for select2
need to be included-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script>
(document).ready(function () {
//Select2
(".progLang").select2({
tags: true,
});
//Chosen
$(".progLang1").chosen({
tags: true,
});
});
</script>
</head>
<body>
<form>
<h4>Selections using Select2</h4>
<select class="progLang"
multiple="true"
style="width: 200px; position: relative;">
<option value="py">Python</option>
<option value="ja">Java</option>
<option value="ht">HTML</option>
</select>
<h4>Selections using Chosen</h4>
<select class="progLang1"
multiple="true"
style="width: 200px;">
<option value="py">Python</option>
<option value="ja">Java</option>
<option value="ht">HTML</option>
</select>
</form>
</body>
</html>
输出:
- Tokenization
标记化是在标签选项被设置为 “true “后使用的。它提供令牌分隔符,作为创建标签的快捷方式。这可以通过在标签名称后面键入列表中指定的任何标记分隔符来完成。在Select2的帮助下,任何字符都可以被创建为标记分隔符。
如前所述,由于Chosen没有标签功能,因此,标记化功能也不可用。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!--These jQuery libraries for
chosen need to be included-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />
<!--These jQuery libraries for
select2 need to be included-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script>
(document).ready(function () {
//Select2
(".progLang").select2({
tags: true,
maximumSelectionLength: 2,
tokenSeparators: [
"/", ", ", ";", " ", "#"],
});
//Chosen
$(".progLang1").chosen({
tags: true,
max_selected_options: 2,
tokenSeparators: [
"/", ", ", ";", " ", "#"],
});
});
</script>
</head>
<body>
<form>
<h4>Selections using Select2</h4>
<select class="progLang"
multiple="true"
style="width: 200px;">
<option value="py">Python</option>
<option value="ja">Java</option>
<option value="ht">HTML</option>
</select>
<h4>Selections using Chosen</h4>
<select class="progLang1"
multiple="true"
style="width: 200px;">
<option value="py">Python</option>
<option value="ja">Java</option>
<option value="ht">HTML</option>
</select>
</form>
</body>
</html>
输出: