求解：脚本控制select的下拉列表的自动展开

liuf_fenfangjiemei 2012-02-09 10:19:40

第一种方法（这种方法在IE上能实现，但会提示警告信息）：
1、首先将焦点给Select
2、然后模拟按键Alt+↓。模拟按键是使用ActiveX控件来完成的。

第二种方法：
1、改变select框的高度
<select size="1" name="D1" id="test1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="button" value="提交" name="B1" onclick="if(test1.size==1){test1.size=test1.length} else{test1.size=1}">

而我需要的效果是同select本身的下拉箭头单击时一样，虽然第一种方法效果不错，但不兼容其他浏览器啊。

求高手！！！

...全文

3187 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

liuf_fenfangjiemei 2012-02-15

打赏
举报

select下拉列表触发展开

同我发布的这个帖子是一起的。
http://topic.csdn.net/u/20120209/10/47c9deea-efbe-48f3-9de0-18386144abaa.html
目前是可以搜索到某个选项，但没有展开select下拉列表，用户体验不好。如果能够在搜索的时候，直接展开定位到那个选项，这样就一目了然了。

xuanziday 2012-02-14

打赏
举报

[Quote=引用 5 楼 zkunet 的回复:]

var select = document.getElementById('test11');
fireEvent(select, 'onclick');
function fireEvent(node, eventName) {
if (document.all && !document.addEventListener) {
ele.fire……
[/Quote]

LZ 不会是小白吧？形参写的是node下面用的ele当然报错了，我只是随便敲了点代码，没太注意。

var select = document.getElementById('test11');
fireEvent(select, 'onclick');
function fireEvent(ele, eventName) {
if (document.all && !document.addEventListener) {
ele.fireEvent(eventName);
} else {
var e = document.createEvent("HTMLEvents");
e.initEvent(eventName.replace(/^on/i, ''), false, true);
ele.dispatchEvent(e);
}
}

liuf_fenfangjiemei 2012-02-14

打赏
举报

[Quote=引用 3 楼 left_you 的回复:]
弄一个输入框
输入框下面跟一个select组件：
组件要足够的size展示你所有的选项
组件要用绝对布局，动态获取上头那个输入框的X和Y，来决定它的位置
控制这个select的style.display来显示和隐藏它
[/Quote]
组件要足够的size展示你所有的选项，就是因为有太多选项不能全部显示出来，需要在搜索的时候，定位到那个选项，目前是可以搜索到某个选项，但没有展开select下拉列表，用户体验不好。如果能够在搜索的时候，直接展开定位到那个选项，这样就一目了然了。

liuf_fenfangjiemei 2012-02-14

打赏
举报

xuanziday 2012-02-14

打赏
举报

KingViker 2012-02-14

打赏
举报

你触发select点击事件不就得了 so easy! 不行就给我留言

Left_you 2012-02-13

打赏
举报

弄一个输入框
输入框下面跟一个select组件：
组件要足够的size展示你所有的选项
组件要用绝对布局，动态获取上头那个输入框的X和Y，来决定它的位置
控制这个select的style.display来显示和隐藏它

以前写过的代码片段：

<select id="selectmenu" ondblclick="onselect()" style="background-color: gray;"></select>
vspan.style.display = "block";
vspan.style.top = vlisten.offsetTop + vlisten.offsetHeight;
vspan.style.left = vlisten.offsetLeft; //事件X坐标
vselect.innerHTML = "";
vselect.size = result.length > 20 ? 20 : result.length;

for (i = 0;i < result.length - 1; i++){
var child = document.createElement("option");
child.setAttribute("value",result[i]);
child.innerHTML = result[i];
vselect.appendChild(child);
}

liuf_fenfangjiemei 2012-02-13