[jQuery] 使 ASP.NET 的 DropDownList 支援選項分組(optgroup)

Standard

由於 ASP.NET 的 DropDownList 控制項不支援 optgroup 標籤,就無法做選項分組的功能 ..
後來想用 jQuery 實現此一功能,我寫成 plugin 了,可參考一下:

把這段 code 存成 optgroupTrans.js:

$.fn.optgroupTrans = function() {

        var items = $(this);
        var groupnames = [];
        for (var i = 0; i < items.length; i++) {

            if ($(items[i]).attr('optgroup') != null) {
                groupnames.push($(items[i]).attr('optgroup'));
            }
        }

        // groupnames = $.unique(groupnames);
        groupnames = uniqueArray(groupnames);
        for (var i = 0; i < groupnames.length; i++) {
            $("option[optgroup='" + groupnames[i] + "']").wrapAll("<optgroup label='" + groupnames[i] + "'>");
        }


    function uniqueArray(a){
        temp = new Array();
        for(var i = 0; i < a.length; i++){
            if (!contains(temp, a[i])){
                temp.length += 1;
                temp[temp.length - 1] = a[i];
            }
        }
        return temp;
    }
    function contains(a, e) {
        for (j = 0; j < a.length; j++) 
              if (a[j] == e) return true;
        return false;
    }

};

使用方法:

  <script src="js/jquery-1.5.min.js" type="text/javascript"></script>
  <script src="js/optgroupTrans.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#ddHospital option').optgroupTrans();
            });
        </script>

而 DropDownList 部分:

<asp:DropDownList ID="ddHospital" runat="server">
        <asp:ListItem Value="">請選擇就診醫院</asp:ListItem>
        <asp:ListItem optgroup="台北" Value="台大醫院">台大醫院</asp:ListItem>
        <asp:ListItem optgroup="台北" Value="三軍總醫院">三軍總醫院</asp:ListItem>
        <asp:ListItem optgroup="台北" Value="三軍總醫院澎湖分院">三軍總醫院澎湖分院</asp:ListItem>
        <asp:ListItem Value="大千醫院">大千醫院</asp:ListItem>
</asp:DropDownList>

如此 .. 設為台北的三個選項就會分組在台北的分類下。

※ 若要以 ASP.NET 自訂控制項的方式做 .. 可參考此篇,作者將其包成 dll 了,滿方便 .. web.config 中記得引用就是。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *