Javascript jQuery将标签替换为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>

校园



拯救

Javascript

$(".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");
});

$（.editlinkDropdown”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var数据集=$（this.prevAll（“.datainfoDropdown”）；
var savebtn=$（this.next（“.savebtnDropdown”）；
数据集。每个（函数（）{
var theid=$（this.attr（“id”）；
var currval=$（this.text（）；
var dropDown=$（'#ProfileCampusDropDown'）.html（）；
$（'.datainfoDropdown'）.html（下拉菜单）；
});
$（this.css（“显示”、“无”）；
css（“显示”、“块”）；
});
$（.savebtnDropdown”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var elink=$（this.prev（“.editlinkDropdown”）；
var数据集=$（this.prevAll（“.datainfoDropdown”）；
数据集。每个（函数（）{
var newid=$（this.attr（“id”）；
var einput=$（“#”+newid+“-form”）；
var newval=$（'#ProfileCampusDropDown:selected'）。text（）；
//einput.remove（）；
$（this.html（“”+newval+”）；
});
$（this.css（“显示”、“无”）；
css（“显示”、“块”）；
});

---

如何使用“编辑”按钮显示下拉列表？

我不知道您的ASP.NET中哪里有这个按钮，但很有可能服务器正在更改您为ASP.NET控件设置的ID

---

如果是这种情况，请设置控件的CssClass属性，并使用jQuery的

$（“.class”）

选择器。

查看您的代码，您想要实现什么并不十分清楚。 我必须承认我不明白ID和“-形式”的意义。我一定错过了什么

无论如何，我想这应该符合您的描述（提供了

ProfileCampusDropDown

和

savebtnDropdown

以

display:none；

开始）

---

希望这会有所帮助

我想这没有问题。这些控件具有clientmode=“Static”。

    $(".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();
});