当先锋百科网

首页 1 2 3 4 5 6 7

jQuery Chosen是一个强大的jQuery库,可以方便地实现下拉选框的搜索和过滤功能。此外,它还能够添加自定义样式,使得下拉选框更加美观和易于操作。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery Chosen插件</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.min.css" />
</head>
<body>
<select class="my-select">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
</select>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.jquery.min.js"></script>
<script>
$(function(){
$('.my-select').chosen();
});
</script>
</body>
</html>

在上面的代码中,首先必须引入jQuery和Chosen的CSS和JS文件。然后,我们在<select>标签上添加my-select类,并使用jQuery的chosen()函数初始化它,这样就能实现下拉选框的搜索和过滤功能了。