这是这个问题的后续: dropdownlist to combobox
我有一个下拉列表，在页面加载后将其转换为 jQuery 组合框。我修改了 javascript，以便在使用以下代码选择项目时导致回发(摘录):
注意:__doPostBack('<%= DropDownList1.UniqueID %>', '');
select: function (event, ui) {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
}
);
__doPostBack('<%= DropDownList1.UniqueID %>', '');
},
这可以工作并在后面的代码中触发我的事件。然而，ComboBox 返回到 asp.net DropDownList。准备好的 jQuery 文档不会再次触发并重新设置组合框的样式。我错过了什么吗？
完整来源: ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage2.aspx.cs" Inherits="Sicon.Web.WAP.App.Pages.TestPage2" %>
<%@ Register Src="../WebControls/AdminControls/UserItemValueBuilder.ascx" TagName="UserItemValueBuilder"
TagPrefix="uc1" %>
<%@ Register Src="../WebControls/ModalMessageBox.ascx" TagName="ModalMessageBox"
TagPrefix="uc2" %>
<%@ Register Src="../WebControls/PageControls/BookOnJob.ascx" TagName="BookOnJob"
TagPrefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../App_Themes/Default/Style.css" rel="stylesheet" type="text/css" />
<link href="../JavaScripts/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<script src="../JavaScripts/jquery.min.js" type="text/javascript"></script>
<script src="../JavaScripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.widget("ui.combobox", {
_create: function () {
var self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "";
var input = this.input = $("<input>")
.insertAfter(select)
.val(value)
.autocomplete({
delay: 0,
minLength: 0,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(select.children("option").map(function () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
value: text,
option: this
};
}));
},
select: function (event, ui) {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
}
);
__doPostBack('<%= DropDownList1.UniqueID %>', '');
},
change: function (event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function () {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
// remove invalid value, as it didn't match anything
$(this).val("");
select.val("");
input.data("autocomplete").term = "";
return false;
}
}
}
})
.addClass("ui-widget ui-widget-content ui-corner-left");
input.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
this.button = $("<button type='button'> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function () {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function () {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(document).ready(function () {
$("#DropDownList1").combobox();
});
</script>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="demo">
<asp:UpdatePanel runat="server" ID="upMain" UpdateMode="Always">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
</div>
</form>
</body>
</html>
CS:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Sicon.Web.WAP.Objects.Database;
using System.Data;
using System.Data.SqlClient;
using Objects.Enums;
using Objects.Sage;
using Objects.Engine;
using System.Collections.Generic;
namespace App.Pages
{
public partial class TestPage2 : Sicon.Web.WAP.Objects.Controls.UserPresencePage
{
protected void Page_Load( object sender, EventArgs e )
{
if (!Page.IsPostBack)
{
DropDownList1.DataSource = Objects.Database.User.Users;
DropDownList1.DataTextField = "UserName";
DropDownList1.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged( object sender, EventArgs e )
{
string user = DropDownList1.SelectedValue;
}
}
}
最佳答案
将此添加到您的更新面板
<asp:UpdatePanel runat="server" ID="upMain" UpdateMode="Always" OnUpdateCompleteClientScript="setupPage();">
</asp:UpdatePanel>
并将其用作您的脚本
function setupPage() {
$("#DropDownList1").combobox();
}
$(document).ready(function () {
setupPage();
});
关于jQuery ComboBox 在回发后失去样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6862207/