Hi,
You can create a custom DropDownList to achieve it. In the below codes, you can configure the max displaying items in DropDownList and the scrollbar will appear if items are too many. Property size of Select1 you can set to achieve.
It's implemented by using a HTML text and a HTML select control.
So if you want to add items to Select1 dynamically in code behind, you can use ScriptManager.RegisterStartupScript to add option via JavaScript.
http://forums.asp.net/t/1198683.aspx
If you want to execute the DropDownList_SelectedIndexChanged, you can use JavaScript Checkme function to do postback.
http://forums.asp.net/t/1219751.aspx
If you want to get the selected value of Select1 in code behind, you can use hidden control to achieve.
http://forums.asp.net/t/1211504.aspx
<HTML>
<HEAD>
<title>DropDownList_Scroll</title>
<meta http-equiv="Content-Type" content="text/html; ">
<style>BODY {
FONT: 12px
}
TD {
FONT: 12px
}
DIV {
FONT: 12px
}
LABEL {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px
}
.link_box {
CURSOR: default; TEXT-ALIGN: left
}
.link_head {
BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%;
BORDER-BOTTOM: 2px inset; HEIGHT: 23px
}
.link_text {
PADDING-LEFT: 2px; BACKGROUND: #fff
}
.link_arrow0 {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface;
FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px;
BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_arrow1 {
BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px;
BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px;
BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett;
BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px;
BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_value {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0);
VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid; POSITION: absolute
}
.link_record0 {
BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff;
WIDTH: 100%; COLOR: #000; HEIGHT: 20px
}
.link_record1 {
BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058;
WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px
}
#text1
{
width: 98px;
}
#Select1
{
width: 105px;
}
</style>
</head>
<script type="text/javascript">
var dropShow=false
var currentID
function dropdown(){
if(dropShow){
dropFadeOut()
}else{
currentID=document.getElementById("Select1")
currentID.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//select box fade in
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//select box fade out
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function checkme()
{
var index=currentID.selectedIndex;
document.getElementById('text1').value=currentID.options.item(index).innerText;
dropdown()
}
</script>
<body text="#000000" >
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
<div class="link_head" onclick="dropdown()">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td>
<div class="link_text"><nobr><input id="text1" type="text" ></input></nobr></div>
</td>
<td align="right" width="22">
<div onmouseup="this.className='link_arrow0'" class="link_arrow0"
onmousedown="this.className='link_arrow1'" onkeypress="this.className='link_arrow0'">6</div>
</td>
</tr>
</table>
</div>
<select id="Select1" onchange="checkme()" style="FILTER: alpha(opacity=0); visibility: hidden" name="D1"
size="5" >
<option >0</option>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
<option >6</option>
<option >7</option>
<option >8</option>
<option >9</option>
<option >10</option>
</select>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Hope it helps.