Asp.net 聚焦后展开下拉列表

我正在创建一个数据输入ASP.net表单，当用户进入Dropdownlist时，我希望Dropdownlist控件无需单击即可展开。然后，用户可以使用箭头键选择一个项目，然后退出选项卡，下拉列表可以恢复为其默认视图。有没有办法实现这一点？我尝试在文本框上使用下拉扩展程序，但效果不好。

在下拉事件中调用此函数

function expand() {
    var dropdown = document.getElementById('ddl');
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
}

考虑到你的html

<select id="ddl" onfocus="expand()">
<option value="0">Select</option>
<option value="1">AAAA</option>
<option value="2">BBBBB</option>
</select>

挑选
AAAA
BBBBB

---

在下拉事件上调用此函数

function expand() {
    var dropdown = document.getElementById('ddl');
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
}

考虑到你的html

<select id="ddl" onfocus="expand()">
<option value="0">Select</option>
<option value="1">AAAA</option>
<option value="2">BBBBB</option>
</select>

挑选
AAAA
BBBBB

---

假设您有一个名为“ddlTest”的下拉列表，请尝试以下操作：

 <script>
    function Open() {
       var myDropDown = document.getElementById("ddlTest");
       var length = myDropDown.options.length;           
       myDropDown.size = length;  
   }
   function Select(){
       var myDropDown = document.getElementById("ddlTest");
       myDropDown.size = 1;
       var str = myDropDown.options[myDropDown.selectedIndex].value;
       alert(str);
   }
</script>

<select ID="ddlTest" onfocus="Open()" onfocusout="Select()">
<option>option #1</option>
<option>option #2</option>
<option>option #3</option>
<option>option #4</option>
<option>option #5</option>
<option>option #6</option>
<option>option #7</option>
</select>

函数Open（）{
var myDropDown=document.getElementById（“ddlTest”）；
var length=myDropDown.options.length；
myDropDown.size=长度；
}
函数选择（）{
var myDropDown=document.getElementById（“ddlTest”）；
myDropDown.size=1；
var str=myDropDown.options[myDropDown.selectedIndex].value；
警报（str）；
}
选项1
选项2
选项3
选项4
选项5
选项6
选项7

假设您有一个名为“ddlTest”的下拉列表，请尝试以下操作：

 <script>
    function Open() {
       var myDropDown = document.getElementById("ddlTest");
       var length = myDropDown.options.length;           
       myDropDown.size = length;  
   }
   function Select(){
       var myDropDown = document.getElementById("ddlTest");
       myDropDown.size = 1;
       var str = myDropDown.options[myDropDown.selectedIndex].value;
       alert(str);
   }
</script>

<select ID="ddlTest" onfocus="Open()" onfocusout="Select()">
<option>option #1</option>
<option>option #2</option>
<option>option #3</option>
<option>option #4</option>
<option>option #5</option>
<option>option #6</option>
<option>option #7</option>
</select>

函数Open（）{
var myDropDown=document.getElementById（“ddlTest”）；
var length=myDropDown.options.length；
myDropDown.size=长度；
}
函数选择（）{
var myDropDown=document.getElementById（“ddlTest”）；
myDropDown.size=1；
var str=myDropDown.options[myDropDown.selectedIndex].value；
警报（str）；
}
选项1
选项2
选项3
选项4
选项5
选项6
选项7

Mate，您的代码不允许通过按Tab键选择元素。选择Mate后，将不会收缩下拉列表：D@Anonymous对不起，我的英语不是很好，“Shring”，你的意思是你需要获取所选项目？对不起，输入错误，它的Shring，表示它没有关闭展开的下拉列表。@Anonymous我已经更新了我的答案，因此，在FocusOut上，它将折叠下拉列表并显示所选项目。我的代码中有一个输入错误，我解决了它。您可以立即尝试，mate，您的代码不会让按Tab键选择元素，也不会在选择mate后下拉：D@Anonymous对不起，我的英语不是很好，“Shring”，你的意思是你需要获取所选项目？对不起，输入错误，它的Shring，表示它没有关闭展开的下拉列表。@Anonymous我已经更新了我的答案，因此，在FocusOut上，它将折叠下拉列表并显示所选项目。我的代码中有一个输入错误，我解决了它。你可以试试now@rwaykos伊玛德，我尝试了这个解决方案。但它不会打开下拉列表。即使是小提琴也无法打开焦点下拉列表。我试过Chrome和IE。我是不是遗漏了什么？@rwaykos和Imad，我试过这个解决方案。但它不会打开下拉列表。即使是小提琴也无法打开焦点下拉列表。我试过用Chrome和IE。我是不是遗漏了什么？