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.