由於 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
中記得引用就是。