0

我已经使用 jquery 来使我的下拉列表生效,但是在插入 jquery 后,我无法使 selectedindexed 更改的函数正常工作。但是当我删除 jquery 时,一切似乎都工作正常。

另一件事,在下拉列表中应用 jquery 后,下拉列表中的所有项目都显示为列表项“li”而不是选项。

我也尝试过使用 javascript 函数,但是每当我在下拉列表中使用 jquery 时都会发生同样的情况。

代码如下:

<asp:DropDownList ID="DropDownProducts" Width="150px" CssClass="RegistryDrop" 
     runat="server" AutoPostBack="True" OnDataBinding="dropprodsbinding"
     OnSelectedIndexChanged="DropDownProducts_SelectedIndexChanged" 
     DataTextField="Name" AppendDataBoundItems="True"
     DataValueField="id">
</asp:DropDownList>

代码背后的代码在这里:

function getSelectOptions(parentid) {
   var select_options = new Array();
    var ul = document.createElement('ul');
    $select.children('option').each(function () {
        var li = document.createElement('li');
        li.setAttribute('id', parentid + '_' + $(this).val());
        li.innerHTML = $(this).html();
        if ($(this).is(':selected')) {
            $input.val($(this).html());
            $(li).addClass(opt.currentClass);
        }
        ul.appendChild(li);
        $(li)
        .mouseover(function (event) {
            hasfocus = 1;
            if (opt.debug) console.log('over on : ' + this.id);
            jQuery(event.target, $container).addClass(opt.hoverClass);
        })
        .mouseout(function (event) {
            hasfocus = -1;
            if (opt.debug) console.log('out on : ' + this.id);
            jQuery(event.target, $container).removeClass(opt.hoverClass);
        })
        .click(function (event) {
            var fl = $('li.' + opt.hoverClass, $container).get(0);
            if (opt.debug) console.log('click on :' + this.id);
            $('li.' + opt.currentClass).removeClass(opt.currentClass);
            $(this).addClass(opt.currentClass);
            setCurrent();
            hideMe();
        });
    });
    return ul;
}

希望得到一些解决方案。谢谢你

4

1 回答 1

0

您的 javascript/jquery 代码正在将下拉列表转换为客户端浏览器中的无序列表。发生该转换后,ASP.net 控件在下拉列表中的任何挂钩都不再存在,因为下拉列表已替换为ul结构。

最终,所有回发操作都是由 ASP.Net 嵌入到<selecthtml 元素中的 javascript 代码发生的。因此,当您替换该元素时,不会调用任何这些操作。

理论上,您应该能够使用客户端分析(Chrome 开发人员工具或 Firebug)来识别这些附件是什么,以查看<select在您的页面的非 jquery 版本中附加了哪些函数/事件。一旦您确定了这些事件,您可以将它们作为函数存储在 javascript 中,并将它们附加到<uljquery 替换的结构上的事件<select

您必须自己进行一些分析才能确定发生了什么,但它可能很简单(与您的实际和元素相关联的标识符的位置和位置)mySelectmyULselectul

var functionToExec = $('#mySelect').click;
$('#myUL').children.each.click = functionToExec;
于 2013-03-25T14:32:56.153 回答