Question

我有一个JS处理的简单Dropdownlist控件，一旦索引发生变化，就会打开/关闭一个div。

初始化Dropdownlist的HTML代码 -

    <select id="selectmethod" onchange="run()">
      <option value="1" selected="selected">option1</option>
      <option value="2" >option2</option>
    </select>

处理OnChange事件的JavaScript代码 -

       function run() {
            var e = document.getElementById("selectmethod");
            var value = e.options[e.selectedIndex].value;

            if (value == 1) {

                $('#changecourseitems').slideUp();
                $('#addnewcourseitems').slideDown();
            }
            if (value == 2) {

                $('#addnewcourseitems').slideUp();
                $('#changecourseitems').slideDown();

            }

现在，当用户点击<ASP:LinkButton ... />时回发事件开始，Dropdownlist索引重置（所以隐藏的div）。如何在回发后维护Dropdownlist索引？

谢谢！

Answer 1

要维护下拉列表的内容，您必须每次都在服务器上重新填充它或使用viewstate。例如，您可以像这样填充数据

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        DropDownList1.Items.Add(new ListItem() { Text = "option1", Value = "1", Selected = true });
        DropDownList1.Items.Add(new ListItem() { Text = "option2", Value = "2" });
    }
}

在页面中，您可以使用ASP控件并启用视图状态：

<asp:DropDownList ID="DropDownList1" runat="server" EnableViewState="true">
</asp:DropDownList>

现在数据将来回发布，并将在客户端维护

Answer 2

为了保持价值，有多种方法。 1.将选择更改为服务器控件 2.添加隐藏值并将选择标记值保存到run（）中的此隐藏值。然后设置选择值在document.ready（）。

<asp:HiddenField ID="yourHiddenValue" runat="server" />

你的跑步方法。

function run() {
    var e = document.getElementById("selectmethod");
    var value = e.options[e.selectedIndex].value;

    if (value == 1) {

        $('#changecourseitems').slideUp();
        $('#addnewcourseitems').slideDown();
    }
    if (value == 2) {

        $('#addnewcourseitems').slideUp();
        $('#changecourseitems').slideDown();

    }

    $('#<%=yourHiddenValue.ClientID%>').val(value);  // <--- added
}

这是文档就绪功能。

$(function() {
    var hiddenValue = $('#<%=yourHiddenValue.ClientID%>').val();
    $('#selectmethod').val(hiddenValue);
}

Answer 3

如果要在ASP.Net Web窗体中保留控件的状态，则需要使用 DropDownList服务器控件，它使用了 ViewState 。

<asp:DropDownList runat="server" ID="DropDownList1">
    <asp:ListItem Text="Add New Course" Value="1" />
    <asp:ListItem Text="Change Course" Value="2" />
</asp:DropDownList>

<div id="changecourseitems">Change course</div>
<div id="addnewcourseitems">Add new course</div>

<asp:LinkButton ID="LinkButton1" runat="Server" OnClick="LinkButton1_Click" 
    Text="Submit" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var selectMethod = function(){
            if ($('#<%= DropDownList1.ClientID %>').val() === '1') {
                $('#changecourseitems').hide();
                $('#addnewcourseitems').slideDown();
            } else {
                $('#addnewcourseitems').hide();
                $('#changecourseitems').slideDown();
            }
        }
        $('#<%= DropDownList1.ClientID %>').change(selectMethod);
        selectMethod();
    });
</script>

Answer 4

  <asp:DropDownList ID="selectmethod" ClientIDMode="Static" runat="server" EnableViewState="true">
  </asp:DropDownList>

使用ClientIDMode = static，您可以维护在控件上指定的id

你的js文件应该是：

  $('#selectmethod').change(function () {
     var value = $(this).val();

     if (value == 1) {

        $('#changecourseitems').slideUp();
        $('#addnewcourseitems').slideDown();
     }
     if (value == 2) {

        $('#addnewcourseitems').slideUp();
        $('#changecourseitems').slideDown();

     }
  });

Asp.net - Postback失去Dropdownlist索引

4 个答案: