[英]jQuery Replace label with ASP.NET dropdownlist
我正在使用数据库中的数据来构建可编辑的表单,这需要使用ASP.NET控件。 我使用HTML进行此工作,但是当我添加.NET部件时,我陷入了困境。
情况如下:我在页面上显示了一个标签,下面有一个编辑按钮。 应该发生的事情是,一旦按下编辑按钮,标签将成为包含数据库数据的.NET下拉列表。 用户单击“保存”后,下拉列表将返回显示所选值的标签。
我的问题是,当您单击编辑按钮时,下拉列表将永远不会出现。
这是代码:
.ASCX
<li>
Campus
<br />
<span class="datainfoDropdown">
<strong>
<asp:Literal ID="CampusAttended" runat="server" ClientIDMode="Static"/>
</strong>
<asp:DropDownList ID="ProfileCampusDropDown" runat="server" ClientIDMode="Static" style="display:none;" ></asp:DropDownList>
</span>
<a href="#" class="editlinkDropdown">Edit Info</a>
<a class="savebtnDropdown">Save</a>
</li>
Java脚本
$(".editlinkDropdown").on("click", function (e) {
e.preventDefault();
var datasets = $(this).prevAll(".datainfoDropdown");
var savebtn = $(this).next(".savebtnDropdown");
datasets.each(function () {
var theid = $(this).attr("id");
var currval = $(this).text();
var dropDown = $('#ProfileCampusDropDown').html();
$('.datainfoDropdown').html(dropDown);
});
$(this).css("display", "none");
savebtn.css("display", "block");
});
$(".savebtnDropdown").on("click", function (e) {
e.preventDefault();
var elink = $(this).prev(".editlinkDropdown");
var datasets = $(this).prevAll(".datainfoDropdown");
datasets.each(function () {
var newid = $(this).attr("id");
var einput = $("#" + newid + "-form");
var newval = $('#ProfileCampusDropDown :selected').text();
//einput.remove();
$(this).html('<strong>' + newval + '</strong>');
});
$(this).css("display", "none");
elink.css("display", "block");
});
如何获得我的编辑按钮以显示下拉列表?
查看您的代码,您想要实现的目标并不十分清楚。 我必须承认我没有看到ID和“ -form”的含义。 我肯定错过了什么。
无论如何,我想这应该做你的描述(提供ProfileCampusDropDown
和savebtnDropdown
一个开始display:none;
)
$(".editlinkDropdown").on("click", function (e) {
e.preventDefault();
$(this).prevAll(".datainfoDropdown").find("strong").hide();
$('#ProfileCampusDropDown').show();
$(this).hide();
$(this).next(".savebtnDropdown").show();
});
$(".savebtnDropdown").on("click", function (e) {
e.preventDefault();
var strong = $(this).prevAll(".datainfoDropdown").find("strong");
strong.html($('#ProfileCampusDropDown :selected').text());
strong.show();
$('#ProfileCampusDropDown').hide();
$(this).hide();
$(this).prev(".editlinkDropdown").show();
});
希望这会有所帮助
我不知道您在ASP.NET中的哪个位置,但是很有可能服务器为您为asp.net控件设置的ID进行了更改。
如果是这种情况,请设置控件的CssClass属性,然后使用jQuery的$(".class")
选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.