Открыть Выбрать с помощью Javascript / jQuery?

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>

Я должен открыть свой выбор, т.е. ошибка. Все версии 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;
    });

}

Но при первом щелчке по моему выбору изменится ширина, но мне придется щелкнуть снова, чтобы открыть его.

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

НЕТ Решение jQuery.

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

Нашел здесь .

Answer 5

Попробуйте это:

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

и это закрыть:

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

Answer 6

Прежде всего, я чувствую боль этого ограничения в IE - блеф! Просто подумал, что я тоже поделюсь этим, потому что мне кажется, что это работает. Я выбрал почти такой же подход, но для каждого выбранного элемента. В моем случае я знаю, какие списки могут иметь длинные данные.

Вместо того, чтобы делать элементы выбора абсолютными, я оставил их встроенными и обернул их в 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);

Надеюсь, это кому-нибудь поможет

Answer 7

Я думаю, что вам нужно возвращать true из ваших обработчиков событий (щелчок, размытие и т. Д.), Поэтому после выполнения вашего обработчика браузер продолжает распространять событие и открывать выборку.

Аналогично ссылкам href, если они имеют обработчик onclick и обработчик возвращает false, ссылка не отслеживается (браузер останавливает событие после выполнения вашего обработчика).

РЕДАКТИРОВАТЬ: Судя по вашим комментариям и ответам, ваш обработчик получает первый шанс выполнить только после того, как браузер решит открыть окно.
Я предлагаю вам попробовать обработчик событий focus, он может получить шанс запустить раньше, чем обработчик click и, возможно, до того, как браузер действительно откроет окно. Это также более согласованно (относится как к навигации с помощью мыши, так и клавиатуры).

Answer 8

Я нашел альтернативное решение для этой проблемы. Просто добавьте тему в поле выбора, например Selectize.js, она преобразует поле выбора в HTML-теги ul li, но работает как поле выбора. Вы можете легко скрыть шоу ul li на событиях jquery.

Answer 9

вы не можете открыть список выбора, но вы можете сделать это, изменив размер этого списка при щелчке или любом другом событии, которое вы хотите

        $("#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 10

Событие mousedown поднимается до события click:

1. первый подъем mousedown -> установить ширину 'auto' (если состояние выпадающего меню 'close')
2. нажмите кнопку повышения -> сохранить в переменной состояние раскрывающегося списка: 'open'
3. Мы выбираем значение, второй mousedown поднимается: ничего не делать
4. нажмите кнопку повышения -> нам нужно восстановить исходную ширину раскрывающегося списка и изменить состояние переменной на: 'close'

Событие размытия и изменения необходимо для закрытия раскрывающегося списка, если пользователь щелкнул вне раскрывающегося списка.

Вот полное решение с кодом Брендана:

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