how to show all item of a dropdown list in asp.net

2019-07-25 19:57发布

问题:

I want to show all of the items of a dropdown list as it is opened without clicking the down arrow. Do you have any suggestions?

回答1:

There's a lot of ways to do this.

The most basic way is as follows:

<html>
    <head>
        <title>Example</title>
    </head>
    <body>

        <div style="float:left; width:100%; height:30px;">
            <select id="AutoDropdown" OnMouseOver="DoDropDown(this);" OnMouseOut="DoDropDown(this);">
                <option>Test1</option>
                <option>Test2</option>
                <option>Test3</option>
                <option>Test4</option>
            </select>
        </div>

        <div>
            <p>Here is some text that we hope the drop down list will appear over</p>
        </div>

        <script type="text/javascript">

        function DoDropDown(objSel){

             if(objSel.size > 1){
              objSel.size = 1;
              objSel.style.position='static';
             }
             else{
              objSel.size = objSel.options.length;
              objSel.style.position='absolute';
              objSel.style.height='auto';
            }
        }

        </script>

    </body>
</html>

This emulates the effect I think you are trying to achieve but doesn't look great.

You can get a better effect by emulating a drop down list - there are plenty of control alternatives on the web.

There's a Silverlight version here:

http://gallery.expression.microsoft.com/OpenComboBoxDropDown

There's also a variety of controls you could adapt in the AJAX toolkit:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite

I'm pretty sure you can make both the DropDown and PopupControls appear on a MouseOver event.

With the PopupControl, tie it to a text box, and when the user selects a value, populate the text box.

Some of the third party controls (like Telerik's) also support this style.



回答2:

Use a ListBox or show all options in a grid control such as a Repeater or ListView.

Don't know an API in javascript that would do it for you - so i would change the control if it were me.