【发布时间】：2015-05-16 02:18:34
【问题描述】：
我正在使用 Web 表单 (ASP.NET / C#) 编写 Web 应用程序。我有一个选择使用 jquery 插件的 ListBox 控件。我使用数据库调用在代码隐藏中填充列表框。它工作正常，所以我想将组添加到 ListBox。数据显示在列表中，而不是按我设置的组显示。
我相信问题出在所选的查询插件上。我可能需要以某种方式设置此插件的选项，但我还没有看到任何有关如何执行此操作的文档。
这是我的 javascript / HTML 代码：
<script type="text/javascript">
$(document).ready(function () {
$(".chosen-select").chosen({
search_contains: true,
no_results_text: "Sorry, no match!",
allow_single_deselect: true
});
$('.chosen-container').css('width', '600px');
});
</script>
<asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"
data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
</asp:ListBox>
这是我用来填充 ListBox 的 C# 代码：
foreach (DataRow row in m_dtRecipients.Rows)
{
ListItem recItem = new ListItem(row["Name"].ToString(), row["ID"].ToString());
if (row["UserID"].ToString().Equals("Global"))
{
recItem.Attributes[OPT_GROUP_ATTRIBUTE] = GLOBAL_GROUP;
}
else if (row["UserID"].ToString().Equals(m_strUserID))
{
recItem.Attributes[OPT_GROUP_ATTRIBUTE] = PERSONAL_GROUP;
}
else
{
recItem.Attributes[OPT_GROUP_ATTRIBUTE] = INDIVIDUAL_GROUP;
}
lstBoxTo.Items.Add(recItem);
}
数据正确，ListBox 显示数据但不是分组显示。 如何获取所选的 jquery 插件以分组显示数据？
谢谢。
更新
我了解到 ListBox 和 DropDownList 不支持 optgroup。所以我想尝试这个解决方案，但无法理解 javascript。 在后面的代码中，每个 ListItem 都添加了属性：
foreach (ListItem item in ((DropDownList)sender).Items)
{
if (System.Int32.Parse(item.Value) < 5)
item.Attributes.Add("classification", "LessThanFive");
else
item.Attributes.Add("classification", "GreaterThanFive");
}
这是javascript
<script>
$(document).ready(function() {
//Create groups for dropdown list
$("select.listsmall option[@classification='LessThanFive']").wrapAll("<optgroup label='Less than five'>");
$("select.listsmall option[@classification='GreaterThanFive']").wrapAll("<optgroup label='Greater than five'>");
});
我不明白“select.listsmall”代表的位置。我尝试使用我的 ListBox ID，但出现异常。 谁能解释这部分的javascript？ 谢谢。
更新 这就是我从上面使用代码隐藏和 javascript 的方式：
private const string OPT_GROUP_ATTRIBUTE = "grouping";
private const string GLOBAL_GROUP = "Global Groups";
private const string PERSONAL_GROUP = "Personal Groups";
private const string INDIVIDUAL_GROUP = "Individuals";
foreach (DataRow row in m_dtRecipients.Rows)
{
ListItem recItem = new ListItem(row["Name"].ToString(), row["ID"].ToString());
if (row["UserID"].ToString().Equals("Global"))
{
recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, GLOBAL_GROUP);
}
else if (row["UserID"].ToString().Equals(m_strUserID))
{
recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, PERSONAL_GROUP);
}
else
{
recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, INDIVIDUAL_GROUP);
}
lstBoxTo.Items.Add(recItem);
}
这是 ListBox HTML：
<asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"
data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
</asp:ListBox>
这是javascript：
$(document).ready(function () {
$(".chosen-select").chosen({
search_contains: true,
no_results_text: "Sorry, no match!",
allow_single_deselect: true,
group: true
});
$('.chosen-container').css('width', '600px');
//Create groups for dropdown list
$("select.chosen-select option[@grouping='Global Groups']").wrapAll("<optgroup label='Global Groups'>");
$("select.chosen-select option[@grouping='Personal Groups']").wrapAll("<optgroup label='Personal Groups'>");
$("select.chosen-select option[@grouping='Individuals']").wrapAll("<optgroup label='Individuals'>");
});
我有什么遗漏或错误吗？
更新 好吧，如果我从属性 = 值中删除“@”，它不会引发异常，但它也不会对列表进行分组。
【问题讨论】：
-
listsmall 是列表框中的一个 CSS 类。它的编写方式需要 jQuery 在 HTML 中找到您的选择列表（列表框）。将“listsmall”添加到您的列表框，它应该会找到它。
-
我为我的列表框定义了一个 css 类作为'chosen-select'。我尝试使用“select.chosen-select”代替“select.listsmall”。我仍然收到“无法识别的表达式错误”。