发表新帖
发表新帖

Open Select using Javascript/jQuery?

后端 未结
关注
13 1691
伪装坚强ぢ
伪装坚强ぢ 2020-11-28 13:57

Is there a way to open a select box using Javascript (and jQuery)?
提交评论
  •  加载中...
  • 故里飘歌
    2020-11-28 14:54

    Try this:

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

    Then call the function:

    dropDown('elementId');
    0 讨论(0)
  • 名媛妹妹
    2020-11-28 14:54

    The mousedown event is raise before the click event :

    1. first mousedown raise -> set the width to 'auto' (if the state of the dropdown is 'close')
    2. click raise -> store in a var the state of the dropdown : 'open'
    3. We select a value, the second mousedown is raised : nothing to do
    4. click raise -> we need to restore the original width of the dropdown and change the state of the var to : 'close'

    The blur and change event are needed to close the dropdown if the user clicked outside the dropdown.

    Here the complete solution with Brendan's code :

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

    Call the function :

    <script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#mydropdownlist').IELongDropDown();
    });
</script>
    0 讨论(0)
  • 离开以前
    2020-11-28 14:54

    you can not open the select list but you can do it by changing the size of theselect list on click or any other event you want

            $("#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);
        });
    0 讨论(0)
  • 眼角桃花
    2020-11-28 14:56

    As an alternative you can use the select2 plugin and do the following:

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

    It worked perfectly for me in Firefox version 79.0

    0 讨论(0)
  • 遇见更好的自我
    2020-11-28 14:57

    I know this is pretty old and answered, but this worked for me in Safari and iOS UIWebView - I have it hidden, but want it to show and open when a different button is clicked.

    $('#select-id').show().focus().click();
    0 讨论(0)
    • 上一页 1 2 3 下一页
     看不清?
    提交回复
    热议问题