{% 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
今日推荐
周排行