是否有可能使用JS打开HTMLselect显示其选项列表？
是否可以使用JavaScript打开一个HTMLselect来显示其选项列表？
不幸的是，这个问题有一个简单的答案，它是“否”
这适用于Google Chrome
dropDown = function (elementId) { var dropdown = document.getElementById(elementId); try { showDropdown(dropdown); } catch(e) { } return false; }; showDropdown = function (element) { var event; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); element.dispatchEvent(event); }; 我使用这个…但它需要用户点击select框…
这里是2个JavaScript函数
function expand(obj) { obj.size = 5; } function unexpand(obj) { obj.size = 1; }
然后我创buildselect框
<select id="test" multiple="multiple" name="foo" onFocus="expand(this)" onBlur="unexpand(this)"> <option >option1</option> <option >option2</option> <option >option3</option> <option >option4</option> <option >option5</option> </select>
我知道这段代码有点晚了，但我希望它能帮助那些和我有同样问题的人。
ps / fyi我还没有testing上面的代码（我dynamic地创build我的select框），我写的代码只在FireFox中testing。
我有这个问题…并find了一个可行的解决scheme。
我不希望select框显示，直到用户点击一些纯HTML。 所以我用opacity=.01覆盖了select元素。 点击后，我将其更改回opacity=100 。 这允许我隐藏select，并且当用户点击文本时，select出现并显示选项。
我提出的解决scheme是安全的，简单的，与Internet Explorer，FireFox和Chrome兼容。
这种方法是新的和完整的。 在互联网上我没有发现任何与此解决scheme相同的东西。 简单，跨浏览器（Internet Explorer，Chrome和Firefox），保留布局，使用select本身，易于使用。
注：JQuery是必需的。
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CustonSelect</title> <script type="text/javascript" src="./jquery-1.3.2.js"></script> <script type="text/javascript" src="./CustomSelect.js"></script> </head> <div id="testDiv"></div> <body> <table> <tr> <td> <select id="Select0" > <option value="0000">0000</option> <option value="0001">0001</option> <option value="0002">0002</option> <option value="0003">0003</option> <option value="0004">0004</option> <option value="0005">0005</option> <option value="0006">0006</option> <option value="0007">0007</option> <option value="0008">0008</option> <option value="0009">0009</option> <option value="0010">0010</option> <option value="0011">0011</option> <option value="0012">0012</option> <option value="0013">0013</option> <option value="0014">0014</option> <option value="0015">0015</option> <option value="0016">0016</option> <option value="0017">0017</option> <option value="0018">0018</option> <option value="0019">0019</option> <option value="0020">0020</option> <option value="0021">0021</option> <option value="0022">0022</option> <option value="0023">0023</option> <option value="0024">0024</option> <option value="0025">0025</option> <option value="0026">0026</option> <option value="0027">0027</option> <option value="0028">0028</option> <option value="0029">0029</option> <option value="0030">0030</option> <option value="0031">0031</option> <option value="0032">0032</option> <option value="0033">0033</option> <option value="0034">0034</option> <option value="0035">0035</option> <option value="0036">0036</option> <option value="0037">0037</option> <option value="0038">0038</option> <option value="0039">0039</option> <option value="0040">0040</option> </select> </td> </tr> <tr> <td> <select id="Select1" > <option value="0000">0000</option> <option value="0001">0001</option> <option value="0002">0002</option> <option value="0003">0003</option> <option value="0004">0004</option> <option value="0005">0005</option> <option value="0006">0006</option> <option value="0007">0007</option> <option value="0008">0008</option> <option value="0009">0009</option> <option value="0010">0010</option> <option value="0011">0011</option> <option value="0012">0012</option> <option value="0013">0013</option> <option value="0014">0014</option> <option value="0015">0015</option> <option value="0016">0016</option> <option value="0017">0017</option> <option value="0018">0018</option> <option value="0019">0019</option> <option value="0020">0020</option> <option value="0021">0021</option> <option value="0022">0022</option> <option value="0023">0023</option> <option value="0024">0024</option> <option value="0025">0025</option> <option value="0026">0026</option> <option value="0027">0027</option> <option value="0028">0028</option> <option value="0029">0029</option> <option value="0030">0030</option> <option value="0031">0031</option> <option value="0032">0032</option> <option value="0033">0033</option> <option value="0034">0034</option> <option value="0035">0035</option> <option value="0036">0036</option> <option value="0037">0037</option> <option value="0038">0038</option> <option value="0039">0039</option> <option value="0040">0040</option> </select> </td> </tr> <tr> <td> <select id="Select2" > <option value="0000">0000</option> <option value="0001">0001</option> <option value="0002">0002</option> <option value="0003">0003</option> <option value="0004">0004</option> <option value="0005">0005</option> <option value="0006">0006</option> <option value="0007">0007</option> <option value="0008">0008</option> <option value="0009">0009</option> <option value="0010">0010</option> <option value="0011">0011</option> <option value="0012">0012</option> <option value="0013">0013</option> <option value="0014">0014</option> <option value="0015">0015</option> <option value="0016">0016</option> <option value="0017">0017</option> <option value="0018">0018</option> <option value="0019">0019</option> <option value="0020">0020</option> <option value="0021">0021</option> <option value="0022">0022</option> <option value="0023">0023</option> <option value="0024">0024</option> <option value="0025">0025</option> <option value="0026">0026</option> <option value="0027">0027</option> <option value="0028">0028</option> <option value="0029">0029</option> <option value="0030">0030</option> <option value="0031">0031</option> <option value="0032">0032</option> <option value="0033">0033</option> <option value="0034">0034</option> <option value="0035">0035</option> <option value="0036">0036</option> <option value="0037">0037</option> <option value="0038">0038</option> <option value="0039">0039</option> <option value="0040">0040</option> </select> </td> </tr> <tr> <td> <select id="Select3" > <option value="0000">0000</option> <option value="0001">0001</option> <option value="0002">0002</option> <option value="0003">0003</option> <option value="0004">0004</option> <option value="0005">0005</option> <option value="0006">0006</option> <option value="0007">0007</option> <option value="0008">0008</option> <option value="0009">0009</option> <option value="0010">0010</option> <option value="0011">0011</option> <option value="0012">0012</option> <option value="0013">0013</option> <option value="0014">0014</option> <option value="0015">0015</option> <option value="0016">0016</option> <option value="0017">0017</option> <option value="0018">0018</option> <option value="0019">0019</option> <option value="0020">0020</option> <option value="0021">0021</option> <option value="0022">0022</option> <option value="0023">0023</option> <option value="0024">0024</option> <option value="0025">0025</option> <option value="0026">0026</option> <option value="0027">0027</option> <option value="0028">0028</option> <option value="0029">0029</option> <option value="0030">0030</option> <option value="0031">0031</option> <option value="0032">0032</option> <option value="0033">0033</option> <option value="0034">0034</option> <option value="0035">0035</option> <option value="0036">0036</option> <option value="0037">0037</option> <option value="0038">0038</option> <option value="0039">0039</option> <option value="0040">0040</option> </select> </td> </tr> <tr> <td> <select id="Select4" > <option value="0000">0000</option> <option value="0001">0001</option> <option value="0002">0002</option> <option value="0003">0003</option> <option value="0004">0004</option> <option value="0005">0005</option> <option value="0006">0006</option> <option value="0007">0007</option> <option value="0008">0008</option> <option value="0009">0009</option> <option value="0010">0010</option> <option value="0011">0011</option> <option value="0012">0012</option> <option value="0013">0013</option> <option value="0014">0014</option> <option value="0015">0015</option> <option value="0016">0016</option> <option value="0017">0017</option> <option value="0018">0018</option> <option value="0019">0019</option> <option value="0020">0020</option> <option value="0021">0021</option> <option value="0022">0022</option> <option value="0023">0023</option> <option value="0024">0024</option> <option value="0025">0025</option> <option value="0026">0026</option> <option value="0027">0027</option> <option value="0028">0028</option> <option value="0029">0029</option> <option value="0030">0030</option> <option value="0031">0031</option> <option value="0032">0032</option> <option value="0033">0033</option> <option value="0034">0034</option> <option value="0035">0035</option> <option value="0036">0036</option> <option value="0037">0037</option> <option value="0038">0038</option> <option value="0039">0039</option> <option value="0040">0040</option> </select> </td> </tr> </table> <input type="button" id="Button0" value="MoveLayout!"/> </body> </html>
JAVASCRIPT代码
var customSelectFields = new Array(); // Note: The list of selects to be modified! By Questor customSelectFields[0] = "Select0"; customSelectFields[1] = "Select1"; customSelectFields[2] = "Select2"; customSelectFields[3] = "Select3"; customSelectFields[4] = "Select4"; $(document).ready(function() { //Note: To debug! By Questor $("#Button0").click(function(event){ AddTestDiv(); }); StartUpCustomSelect(null); }); //Note: To test! By Questor function AddTestDiv() { $("#testDiv").append("<div style=\"width:100px;height:100px;\"></div>"); } //Note: Startup selects customization scheme! By Questor function StartUpCustomSelect(what) { for (i = 0; i < customSelectFields.length; i++) { $("#" + customSelectFields[i] + "").click(function(event){ UpCustomSelect(this); }); $("#" + customSelectFields[i] + "").wrap("<div id=\"selectDiv_" + customSelectFields[i] + "\" onmouseover=\"BlockCustomSelectAgain();\" status=\"CLOSED\"></div>").parent().after("<div id=\"coverSelectDiv_" + customSelectFields[i] + "\" onclick=\"UpOrDownCustomSelect(this);\" onmouseover=\"BlockCustomSelectAgain();\"></div>"); //Note: Avoid breaking the layout when the CSS is modified from "position" to "absolute" on the select! By Questor $("#" + customSelectFields[i] + "").parent().css({'width': $("#" + customSelectFields[i] + "")[0].offsetWidth + 'px', 'height': $("#" + customSelectFields[i] + "")[0].offsetHeight + 'px'}); BlockCustomSelect($("#" + customSelectFields[i] + "")); } } //Note: Repositions the div that covers the select using the "onmouseover" event so //Note: if element on the screen move the div always stand over it (recalculate! By Questor function BlockCustomSelectAgain(what) { for (i = 0; i < customSelectFields.length; i++) { if($("#" + customSelectFields[i] + "").parent().attr("status") == "CLOSED") { BlockCustomSelect($("#" + customSelectFields[i] + "")); } } } //Note: Does not allow the select to be clicked or clickable! By Questor function BlockCustomSelect(what) { var coverSelectDiv = $(what).parent().next(); //Note: Ensures the integrity of the div style! By Questor $(coverSelectDiv).removeAttr('style'); //Note: To resolve compatibility issues! By Questor var backgroundValue = ""; var filerValue = ""; if(navigator.appName == "Microsoft Internet Explorer") { backgroundValue = 'url(fakeimage)'; filerValue = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=\'scale\', src=\'fakeimage\' )'; } //Note: To debug! By Questor //'border': '5px #000 solid', $(coverSelectDiv).css({ 'position': 'absolute', 'top': $(what).offset().top + 'px', 'left': $(what).offset().left + 'px', 'width': $(what)[0].offsetWidth + 'px', 'height': $(what)[0].offsetHeight + 'px', 'background': backgroundValue, '-moz-background-size':'cover', '-webkit-background-size':'cover', 'background-size':'cover', 'filer': filerValue }); } //Note: Allow the select to be clicked or clickable! By Questor function ReleaseCustomSelect(what) { var coverSelectDiv = $(what).parent().next(); $(coverSelectDiv).removeAttr('style'); $(coverSelectDiv).css({'display': 'none'}); } //Note: Open the select! By Questor function DownCustomSelect(what) { //Note: Avoid breaking the layout. Avoid that select events be overwritten by the others! By Questor $(what).css({ 'position': 'absolute', 'z-index': '100' }); //Note: Open dropdown! By Questor $(what).attr("size","10"); ReleaseCustomSelect(what); //Note: Avoids the side-effect of the select loses focus.! By Questor $(what).focus(); //Note: Allows you to select elements using the enter key when the select is on focus! By Questor $(what).keyup(function(e){ if(e.keyCode == 13) { UpCustomSelect(what); } }); //Note: Closes the select when loses focus! By Questor $(what).blur(function(e){ UpCustomSelect(what); }); $(what).parent().attr("status", "OPENED"); } //Note: Close the select! By Questor function UpCustomSelect(what) { $(what).css("position","static"); //Note: Close dropdown! By Questor $(what).attr("size","1"); BlockCustomSelect(what); $(what).parent().attr("status", "CLOSED"); } //Note: Closes or opens the select depending on the current status! By Questor function UpOrDownCustomSelect(what) { var customizedSelect = $($(what).prev().children()[0]); if($(what).prev().attr("status") == "CLOSED") { DownCustomSelect(customizedSelect); } else if($(what).prev().attr("status") == "OPENED") { UpCustomSelect(customizedSelect); } }
我相当肯定的答案是：不。您可以selectJavaScript的选项，但不打开select。 您必须使用自定义解决scheme。
至less在壁虎这可能是可能的。 看这里：
- https://developer.mozilla.org/en/DOM/element.dispatchEvent
- https://developer.mozilla.org/en/DOM/document.createEvent
- https://developer.mozilla.org/en/DOM/event.initMouseEvent
编辑：我无法得到这个工作; 好像加雷思是正确的
这是非常晚，但我认为这可能是有用的，他们应该引用这个问题。 我相信下面的JS会做什么问。
<script> $(document).ready(function() { document.getElementById('select').size=3; }); </script>
在试图解决这个问题一段时间后，我设法得到了一个也是有效的工作解决scheme：
var event = new MouseEvent('mousedown'); element.dispatchEvent(event);
我试图在JQuery中实现这一点，使用trigger和mousedown或只有mousedown但没有成功。
//use jquery $select.trigger('mousedown')
