Question

我已经使用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;
}

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

Answer 1

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

最终，所有的回发操作都是由于ASP.Net嵌入到<select html元素中的JavaScript代码而发生的。因此，当您替换该元素时，将不会调用这些操作。

理论上，您应该能够确定这些附件使用客户端分析（Chrome开发人员工具或Firebug）来查看哪些功能/事件附加到非jquery版本的<select中你的页面。识别出这些事件后，您可以将它们存储为javascript中的函数，并将它们附加到jquery用<ul替换的<select结构上的事件。

你必须对你的结果做一些分析才能确定发生了什么，但它可能就像某些事情一样简单（mySelect和myUL是与你的关联的标识符实际的select和ul元素：

var functionToExec = $('#mySelect').click;
$('#myUL').children.each.click = functionToExec;

使用jquery时，下拉选择索引不会触发

1 个答案: