jQuery用ASP.NET下拉列表替換標簽

Question

我正在使用數據庫中的數據來構建可編輯的表單，這需要使用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");
});

如何獲得我的編輯按鈕以顯示下拉列表？

Answer 1

查看您的代碼，您想要實現的目標並不十分清楚。 我必須承認我沒有看到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();
});

希望這會有所幫助

Answer 2

我不知道您在ASP.NET中的哪個位置，但是很有可能服務器為您為asp.net控件設置的ID進行了更改。

如果是這種情況，請設置控件的CssClass屬性，然后使用jQuery的$(".class")選擇器。