ASP.NET JavaScript隱藏和顯示所有下拉列表項

Question

您好，我的asp.net中有一個下拉列表，我想隱藏並顯示下拉列表中的所有項目

<asp:DropDownList id="DropDownList1" runat="server">
 <asp:listitem value="">Select one</asp:listitem>
 <asp:listitem value="1">Item 1</asp:listitem>
 <asp:listitem value="2">Item 2</asp:listitem>
 <asp:listitem value="3">Item 3</asp:listitem>
 <asp:listitem value="4">Item 4</asp:listitem>
 <asp:listitem value="5">Item 5</asp:listitem>
 <asp:listitem value="6">Item 6</asp:listitem>
 <asp:listitem value="7">Item 7</asp:listitem>
 <asp:listitem value="8">Item 8</asp:listitem>
 <asp:listitem value="9">Item 9</asp:listitem>
 <asp:listitem value="10">Item 10</asp:listitem>
</asp:DropDownList>

我有一個按鈕btnHideAll和btnShowALL如果btnHideAll我想隱藏所有此項目，當btnshowall僅顯示所有項目時。

Answer 1

嘗試這個

<script>
     function toggleSelect(show){
        var sel = document.getElementById('<%=DropDownList1.ClientID%>');
        var selHTML = sel.innerHTML;

        if( selHTML != '' && !show) {
            // save items HTML on first call
            if( window['selHTML']== undefined ||  !window['selHTML'] ) window['selHTML'] = selHTML;
            sel.innerHTML ='';
        }else if( selHTML == '' && show ){
            sel.innerHTML = window['selHTML']
        }   
    };
 </script>

假設您具有帶有名為onclick的javascript函數的按鈕

<input type="button" value="btnHideAll" onclick="toggleSelect(false)" />
<input type="button" value="btnShowALL" onclick="toggleSelect(true)" />

Answer 2

像這樣嘗試

在后面的代碼中添加一種方法，例如

public List<Object> dfgdf()
{
 List<object> lst=new List<object>;

 lst.add(item1);   // add data

 return lst;
}

在腳本中：

   $(document).ready(function(){
      $("#btnShowALL").click(function(){
      $.getJSON("/Codebehind.aspx.cs/dfgdf",function(result){
      $.each(result, function(i, field){
      $("#DropDownList1").append(field + " ");
         });
      });
    });
 $("#btnHideAll").click(function(){
      $("#DropDownList1").empty(); 
    });
});

Answer 3

<input type="button" value="Hide options" onclick="changeVisible(false)" />
<input type="button" value="Show options" onclick="changeVisible(true)" />

function changeVisible(visible){
    var dropDown = document.getElementById("<%= DropDownList1.ClientID %>");
    var options = dropDown.getElementsByTagName("option");
    for(var i = 0; i < options.length; ++i){
        options[i].style.display = visible? "inline" : "none";
    }
}

Answer 4

試試這個，我認為這將幫助你..演示Here