使用Javascript / jQuery打开选择？
有没有办法使用Javascript（和jQuery）打开一个选择框？
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu nunc, rhoncus ac dignissim at, rhoncus ac tellus. 3 我必须打开我的选择，因为bug。 所有版本的IE（6,7,8）都削减了我的选择。 据我所知，这没有css bugfix。 目前我尝试执行以下操作：
var original_width = 0; var selected_val = false; if (jQuery.browser.msie) { $('select').click(function(){ if (selected_val == false){ if(original_width == 0) original_width = $(this).width(); $(this).css({ 'position' : 'absolute', 'width' : 'auto' }); }else{ $(this).css({ 'position' : 'relative', 'width' : original_width }); selected_val = false; } }); $('select').blur(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); }); $('select').blur(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); }); $('select').change(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); }); $('select option').click(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); selected_val = true; }); }
但是第一次点击我的选择将改变选择的宽度，但我必须再次点击打开它。
您可以使用mousedown处理程序捕获mousedown事件，而不是使用click 。 mousedown在click之前触发，因此您可以调用stopPropogation来中断事件队列。
我知道这已经很老了并且已经回答了，但这在Safari和iOS UIWebView中对我有用 – 我把它隐藏了，但是想要在点击不同的按钮时显示和打开它。
$('#select-id').show().focus().click();
试试这个：
var myDropDown=$("#myDropDown"); var length = $('#myDropDown> option').length; //open dropdown myDropDown.attr('size',length);
这将关闭：
//close dropdown myDropDown.attr('size',0);
首先，我感受到IE中这种限制的痛苦 – bleh！ 我以为我也会分享这个，因为它似乎对我有用。 我采用了几乎相同的方法，但是在每个选择元素上。 在我的情况下，我知道哪些列表可能有长数据。
而不是使select元素绝对，我保持它们内联并将它们包装在具有隐藏溢出的DIV中，因为外观需要保持一致，如果它是IE并且扩展宽度大于它，它也仅应用此’hack’当前的宽度。
要将其用于所有选择框，您可以使用以下内容：
$("select").each(function(){ $(this).IELongDropDown(); });
或者显然在id的每个元素基础上。 这是jquery插件：
(function($) { $.fn.IELongDropDown = function(cln) { if (jQuery.browser.msie) { //only IE has problems with long select boxes var el = this; var previousWidth = el.width(); var divWrapper = ""; el.wrap(divWrapper); var newWidth = el.width("auto").width(); el.width(previousWidth); if(newWidth > previousWidth) { el.bind("mousedown", function(){ return el.width("auto").focus(); }); el.bind("blur", function(){ return el.width(previousWidth); }); el.bind("change", function(){ return el.width(previousWidth); }); } } return this; }; })(jQuery);
希望这有助于某人
我认为您需要从事件处理程序返回true（单击，模糊等），因此在处理程序执行后，浏览器继续传播事件并打开选择。
它与href链接类似，如果它们有一个onclick处理程序并且处理程序返回false，则不遵循链接（浏览器在处理程序执行后停止事件）。
编辑：根据您的评论和答案，似乎您的处理程序只有在浏览器决定打开该框后才能获得第一次执行的机会。
我建议你尝试focus事件处理程序，它可能有机会比click处理程序更早运行，也许在浏览器实际打开框之前。 它也更加一致（适用于鼠标和键盘导航）。
没有 jQuery解决方案。
在这里找到了 。
试试这个：
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); };
然后调用函数：
dropDown('elementId');
我更喜欢在CSS文件中设置我的CSS然后“addClass”，但即便如此，你的代码（部分）
$('select').blur(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); }); $('select').blur(function(){ $(this).css({ 'position' : 'relative', 'width' : original_width }); });
似乎是重复的
我会做到的：
$('select').blur().css({ 'position' : 'relative', 'width' : original_width });
不确定你真的甚至需要.blur（）这里有.change（）事件（尝试把它拿出去看看是否能解决你的问题……我经常在IE上使用select并且似乎没有问题。
好的，我找到了解决这个问题的另一种方法。 这是修复：
请给我反馈！ 我为自己感到自豪;）
$(document).ready(function() { if (jQuery.browser.msie) { select_init(); } }); function select_init () { var selects = $('select'); for (var i = 0; i < selects.length; i++) { _resizeselect.init(selects[i]); } } var _resizeselect = { obj : new Array(), init : function (el) { this.obj[el] = new resizeselect (el); } } function resizeselect (el) { this.el = el; this.p = el.parentNode; this.ht = el.parentNode.offsetHeight; var obj = this; this.set = false; el.onmousedown = function () { obj.set_select("mousedown"); } el.onblur = function () { obj.reset_select("blur"); } el.onchange = function () { obj.reset_select("change"); } } resizeselect.prototype.set_select = function (str) { if (this.set) { this.set = false; return; } this.el.style.width = "auto"; this.el.style.position = "absolute"; this.p.style.height = this.ht + "px"; this.p.style.zIndex = 100; this.set = true; this.el.focus(); } resizeselect.prototype.reset_select = function (str) { this.el.style.width = ""; this.el.style.position = ""; this.p.style.height = ""; this.p.style.zIndex = 1; this.set = false; window.focus(); }
在click事件之前引发了mousedown事件：
- 第一个mousedown raise – >将宽度设置为’auto’（如果下拉列表的状态为’close’）
- 单击raise – >在var中存储下拉列表的状态：’open’
- 我们选择一个值，第二个mousedown被提出：无所事事
- click raise – >我们需要恢复下拉列表的原始宽度并将var的状态更改为：’close’
如果用户在下拉列表外单击，则需要使用模糊和更改事件来关闭下拉列表。
这里是Brendan代码的完整解决方案：
(function ($) { var open = {} $.fn.IELongDropDown = function (cln) { if (jQuery.browser.msie) { //only IE has problems with long select boxes var el = this; var id = el.attr('id'); var margin = 2; //Need to set a margin however the arrow is cut var previousWidth = el.width() + margin; var divWrapper = ""; el.wrap(divWrapper); var newWidth = el.width("auto").width(); el.width(previousWidth); if (newWidth > previousWidth) { el.mousedown(function () { if (!open[id]) { el.width("auto"); el.focus(); } }); el.click(function () { if (!open[id]) open[id] = true; else { open[id] = false; return el.width(previousWidth); } }); el.blur(function () { open[id] = false; return el.width(previousWidth); }); el.change(function () { open[id] = false; return el.width(previousWidth); }); } } return this; }; })(jQuery);
调用函数：
您无法打开选择列表，但可以通过单击或任何其他所需事件更改选择列表的大小来执行此操作
$("#drpdwn").mousedown(bodyevent); function bodyevent() { console.log("size changed"); $(this).attr('size',3); } $("#drpdwn").focus(function() { //alert("txt clicked from "); var $el = $("#drpdwn"); var offset = $el.offset(); var event = jQuery.Event( "mousedown", { which: 1, pageX: offset.left, pageY: offset.top }); $el.trigger(event); });
我找到了一个替代解决方案来解决这个问题。 只需在选择框中添加一个主题，如Selectize.js，它会将您的选择框转换为ul li html标签，但作为选择框工作。 您可以轻松地在jquery事件中隐藏show ul li。