下拉框搜尋外掛chosen
阿新 • • 發佈:2018-12-15
{% 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>