<optgroup>不适用于jQuery Dropdown </optgroup>

时间:2012-09-28 11:27:29

标签: c# jquery asp.net .net jquery-ui

我有一个asp:dropdownlist,我已经改为jQuery multiselect。我必须将数据分组到下拉列表中。我在运行时将它分组。如果它是一个正常的asp下拉它的工作。当应用jquery Multiselect时,它不会。

来源:

<link rel="stylesheet" type="text/css" href="Styles/jquery.multiselect.css" />
    <link rel="stylesheet" type="text/css" href="Styles/jquery.multiselect.filter.css" />
    <link rel="stylesheet" type="text/css" href="Styles/style.css" />
    <link rel="stylesheet" type="text/css" href="Styles/prettify.css" />
    <%--<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>--%>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.multiselect.js"></script>
    <script type="text/javascript" src="Scripts/jquery.multiselect.filter.js"></script>
    <script type="text/javascript" src="Scripts/prettify.js"></script>

 <script type="text/javascript">
        $(document).ready(function () {
            //Create groups for dropdown list
            $("option[classification='LessThanFive']").wrapAll("<optgroup label='Less Than Five' />");
            $("option[classification='GreaterThanFive']").wrapAll("<optgroup label='Greater Than five' />");
        });

    </script>

 <asp:DropDownList ID="MobileData" runat="server" OnDataBound="ddl_DataBound">
            </asp:DropDownList>

//代码背后:

protected void ddl_DataBound(object sender, EventArgs e)
    {
        foreach (ListItem item in ((DropDownList)sender).Items)
        {

            if (System.Int32.Parse(item.Value) < 2)
                item.Attributes.Add("classification", "LessThanFive");
            else
                item.Attributes.Add("classification", "GreaterThanFive");

        }

    }

  protected void Page_Load(object sender, EventArgs e)
    {
          ListItemCollection list = new ListItemCollection();     
           list.Add(new ListItem("1", "1"));
           list.Add(new ListItem("2", "2"));
           list.Add(new ListItem("3", "3"));
           list.Add(new ListItem("4", "4"));
           list.Add(new ListItem("5", "5"));
           list.Add(new ListItem("6", "6"));
           list.Add(new ListItem("7", "7"));
           list.Add(new ListItem("8", "8"));
           list.Add(new ListItem("9", "9"));
           list.Add(new ListItem("10", "10"));

           MobileData.DataSource = list;
           MobileData.DataBind();
   }

我哪里错了?

1 个答案:

答案 0 :(得分:0)

它为我工作here

确保选择中的案例是正确的,

如果你在JQuery中使用LessThanFive而HTML呈现效果不佳,那么JQuery将不会返回匹配。

修改 我已经用你给我们的代码创建了一个解决方案,直到我调用$('select').multiselect();我也无法应用任何样式,并显示选项组。

但是,一旦我应用此脚本,我会获得与this示例中给出的相同的下拉列表。只有这样才能重现这些症状。

经过进一步调查后,我看了一下,看到我在调用optGroup之后调用代码添加$('select').multiselect();

所以我认为在控制权初始化之后你会发生下降的改变。

让脚本尽可能早地在页面中添加optGroups,然后在此之后添加代码以初始化多选控件。