Question

有没有办法用Javascript（和jQuery）打开一个选择框？

<select style="width:150px;">
    <option value="1">1</option>
    <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu nunc, rhoncus ac dignissim at, rhoncus ac tellus.</option>
    <option value="3">3</option>
</select>

我必须打开我的选择，原因即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;
    });

}

但是第一次点击我的选择会改变选择的宽度，但是我必须再次点击才能打开它。

Answer 1

您可以使用click处理程序捕获mousedown事件，而不是使用mousedown。 mousedown在click之前触发，因此您可以调用stopPropogation来破坏事件队列。

Answer 2

我知道这已经很老了并且已经回答了，但这在Safari和iOS UIWebView中对我有用 - 我把它隐藏了，但是想要在点击其他按钮时显示和打开它。

$('#select-id').show().focus().click();

Answer 3

试试这个：

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');

Answer 4

我认为您需要从事件处理程序返回true（单击，模糊等），因此在处理程序执行后，浏览器会继续传播事件并打开选择。

它与href链接类似，如果它们有onclick处理程序并且处理程序返回false，则不会遵循链接（浏览器在处理程序执行后停止事件）。

编辑：根据您的评论和回答，您的处理程序似乎只有在浏览器决定打开该框后才能执行第一次机会。
我建议您尝试使用focus事件处理程序，它可能比click处理程序更早运行，并且可能在浏览器实际打开框之前运行。它也更加一致（适用于鼠标和键盘导航）。

Answer 5

首先，我感受到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 = "<div style='padding:0;margin:0;overflow:hidden;width:"+ previousWidth +"px'></div>";
            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);

希望这有助于某人

Answer 6

试试这个：

var myDropDown=$("#myDropDown");
var length = $('#myDropDown> option').length;
//open dropdown
myDropDown.attr('size',length);

这将关闭：

//close dropdown
myDropDown.attr('size',0);

Answer 7

否 jQuery解决方案。

$_POST["subject"]

找到此here。

Answer 8

我更喜欢在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而且似乎没有一个问题。

Answer 9

好的，我找到了解决这个问题的另一种方法。这是修复：

请给我反馈！我为自己感到自豪;）

$(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();
}

Answer 10

在点击事件之前提升了mousedown事件：

首先是mousedown加注 - ＆gt;将宽度设置为“自动”（如果下拉列表的状态为“关闭”）
点击加注 - ＆gt;在var中存储下拉列表的状态：'open'
我们选择一个值，第二个mousedown被提出：无所事事
点击加注 - ＆gt;我们需要恢复下拉列表的原始宽度，并将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 = "<div style='padding:0;margin:0;overflow:hidden;width:" + previousWidth + "px'></div>";
        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);

调用该函数：

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#mydropdownlist').IELongDropDown();
    });
</script>

Answer 11

您无法打开选择列表，但您可以通过更改单击或任何其他您想要的事件上的选择列表的大小来执行此操作

        $("#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);
        });

Answer 12

或者，您可以使用select2插件并执行以下操作：

$(element_select).focus(); 
$(element_select).select2('open').trigger('open');

它在Firefox 79.0版中对我来说非常理想

Answer 13

我发现了这个问题的替代解决方案。只需在选择框中添加一个主题，如Selectize.js，它会将您的选择框转换为ul li html标签，但作为选择框工作。您可以轻松地在jquery事件中隐藏show ul li。

使用Javascript / jQuery打开Select？

13 个答案: