{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试chosen插件</title>
{#需要引入js、css文件#}
<script src="{% static "components/jquery/dist/jquery.js" %}"></script>
<script src="{% static "components/chosen/chosen.jquery.js" %}"></script>
<link rel="stylesheet" href="{% static "components/chosen/chosen.css" %}"/>
<style>
{#隐藏搜索框，F12查看DOM#}
{% comment %}
.chosen-container-single .chosen-search input {
display: none;
}
{% endcomment %}
</style>
</head>
<body>
<select name="select_name" id="select_id" class="chosen-select">
<option value="0">中国</option>
<option value="1">加拿大</option>
<option value="2">美国</option>
<option value="3">法国</option>
</select>
</body>
</html>
<script>
var chosen_plugin = $('.chosen-select').chosen({
allow_single_deselect: true,//是否允许取消选择
search_contains: true,//关键字模糊搜索，设置为false，则只从开头开始匹配
width: '50%',//下拉框宽度
no_results_text: "没有找到结果！",//搜索无结果时显示的提示
max_selected_options: 6 //当select为多选时，最多选择个数
});
{#change事件#}
chosen_plugin.change(function () {
$("#select_id").add(new Option("天国","4"));
});
{#动态更新select下的选择项，只要在更新选择项后触发Chosen中的liszt:updated事件就可以了#}
chosen_plugin.trigger("liszt:updated");
</script>
下拉框搜索插件chosen
猜你喜欢
转载自www.cnblogs.com/konglingxi/p/10123972.html
今日推荐
周排行