30

有没有办法使用 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>

我必须打开我的选择，因为 IE 错误。所有版本的 IE (6,7,8) 都取消了我的选择。据我所知，没有针对此的 CSS 错误修复。目前，我尝试执行以下操作：

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

}

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

4

13 回答 13

7

我知道这已经很老了，而且已经回答了，但这在 Safari 和 iOS UIWebView 中对我有用——我把它隐藏了，但是希望它在单击不同的按钮时显示和打开。

$('#select-id').show().focus().click();
于 2012-07-25T02:50:40.657 回答
6

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

于 2010-01-13T17:19:10.527 回答
6

试试这个： 

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

这要关闭：

//close dropdown
myDropDown.attr('size',0);
于 2014-12-09T23:54:55.887 回答
4

试试这个：

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');
于 2016-01-25T10:16:55.980 回答
2

没有jQuery 解决方案。

<SCRIPT>
    function toggleDropdown(element){
        if(element.size == 0) {
            element.size = element.length;
            element.focus();
            }
        else element.size = 0;
        }
</SCRIPT>

在这里找到这个。

于 2015-09-02T06:22:04.967 回答
1

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

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

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

于 2010-01-12T16:56:03.617 回答
1

首先，我在 IE 中感受到了这种限制的痛苦 - bleh！只是想我也会分享这个，因为它似乎对我有用。我采取了几乎相同的方法，但在每个选择元素上。就我而言，我知道哪些列表可能包含长数据。

我没有使选择元素成为绝对元素，而是将它们保持内联并将它们包装在具有隐藏溢出的 DIV 中，因为外观需要保持一致，而且它仅适用于 IE 并且扩展宽度大于当前宽度。

要将其用于所有选择框，您可以使用以下内容：

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

希望这可以帮助某人

于 2010-02-01T01:12:54.117 回答
0

我更喜欢将我的 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 并且似乎没有问题。

于 2010-01-13T17:06:10.907 回答
0

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

请给我反馈！我有点为自己感到骄傲；）

$(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();
}
于 2010-01-14T09:02:11.090 回答
0

mousedown 事件在单击事件之前引发：

  1. 第一次 mousedown raise -> 将宽度设置为“auto”（如果下拉菜单的状态为“close”）
  2. 单击 raise -> 将下拉列表的状态存储在 var 中：'open'
  3. 我们选择一个值，第二次 mousedown 被提升：无事可做
  4. 单击 raise -> 我们需要恢复下拉菜单的原始宽度并将 var 的状态更改为：'close'

如果用户在下拉菜单之外单击，则需要使用 blur 和 change 事件来关闭下拉菜单。

这是带有 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>
于 2011-04-14T15:41:22.443 回答
0

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

        $("#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);
        });
于 2014-07-03T07:17:06.363 回答
0

作为替代方案，您可以使用select2插件并执行以下操作：

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

它在 Firefox 79.0 版中非常适合我

于 2020-09-01T11:40:02.880 回答
-1

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

于 2014-10-27T08:10:18.127 回答