升級版下拉式選單-chosen

2020-08-18

495
0
JQuery
2020-08-19

傳統的下拉式選單,當選項很多時,容易滑了老半天還是找不到自己要的選項

無意間發現一個蠻好用的套件:chosen, 網址:https://harvesthq.github.io/chosen/#hide-search-on-single-select

它可以讓下拉式選單有查詢功能、多選功能,非常方便,下載必要檔案後,以下就用比較常用的查詢功能來實作

<html>
<head>
    @*引用*@
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/chosen/chosen.jquery.js"></script>
    <link href="~/chosen/chosen.css" rel="stylesheet" />
</head>


<body>
    <input type="button" value="清除" id="clearbtn" />

    @*data-placeholder要自定義的話,第一個option需要放空白選項*@
    <select name="cid" id="cid" class="chosen"  data-placeholder="請選擇一個機構">
        <option value=""></option>
        <option value="0">耕莘醫院辦理新北市愛維養護中心</option>
        <option value="1">臺灣客家語言文化農業推廣協會</option>
        <option value="2">財團法人瑞信兒童醫療基金會</option>
        <option value="3">財團法人台北縣私立天道總會社會福利慈善事業基金會</option>
        <option value="4">台灣關懷弱勢協會</option>
        <option value="5">社團法人IPOWER培力學社</option>
    </select>

</body>
</html>

<script>
    $("#cid").chosen({
        no_results_text: "沒有找到結果！",//搜尋無結果時顯示的提示
        search_contains: true,   //關鍵字模糊搜尋，預設為false,沒另外設定成true的話只能從第一個字開始查詢
        allow_single_deselect: true, //是否允許取消選擇,true會顯示x圖示
        inherit_select_classes: true//如果要另外設定css(如下方width:450px),要設定為true
    });

    $('.chosen').css("width", "450px");//設定寬度,直接寫style在<select>標籤無效

    //選擇時做的動作
    $("#cid").chosen().change(function () {
        alert($("#cid").val());
    });

    //可直接按select上的x來取消選擇,如要另外控制,須加上.trigger("chosen:updated");
    $('#clearbtn').click(function () {
        $("#cid").val('').trigger("chosen:updated");
    })
</script>

補充:讓chosen樣式仿照一般<select class='form-control '> 樣式

http://jsfiddle.net/franknight/3dxn16xx/

回首頁