Подтвердить что ты не робот

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

Есть ли способ открыть поле выбора с помощью 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;
    });

}

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

4b9b3361

ОТВЕТЫ

Ответ 1

Хорошо, я нашел другой способ решить эту проблему. Вот исправление:

Пожалуйста, дайте мне обратную связь! Я горжусь собой;)

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

Ответ 2

Вместо использования click вы можете использовать обработчик mousedown для захвата события mousedown. mousedown срабатывает перед click, поэтому вы можете вызвать stopPropogation, чтобы разбить очередь событий.

Ответ 3

Я знаю, что это довольно старый и ответил, но это сработало для меня в Safari и iOS UIWebView - я скрыл его, но хочу, чтобы он показывался и открывался, когда нажата другая кнопка.

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

Ответ 4

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

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

EDIT:. На основе ваших комментариев и ответов кажется, что ваш обработчик получает первый шанс выполнить только после того, как браузер решит открыть окно.
Я предлагаю вам попробовать обработчик события focus, он может получить возможность запускать раньше обработчика click и, возможно, до того, как браузер действительно откроет окно. Он также более согласован (применяется как для навигации с помощью мыши, так и клавиатуры).

Ответ 5

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

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

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

Ответ 6

Попробуйте следующее:

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

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

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

Ответ 7

NO решение jQuery.

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

Нашел здесь здесь.

Ответ 8

Попробуйте следующее:

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

Ответ 9

Я предпочитаю устанавливать свой 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() (попробуйте его вывести, посмотрите, справляется ли эта проблема с вашей проблемой... Я часто использую select в IE и, похоже, не имею проблема.

Ответ 10

Событие mousedown - рейз перед событием клика:

  • first mousedown raise → установить ширину в 'auto' (если состояние выпадающего меню 'close')
  • click raise → сохранить в var состояние выпадающего списка: 'open'
  • Мы выбираем значение, второе мульдауны поднято: ничего не делать
  • click raise → нам нужно восстановить исходную ширину раскрывающегося списка и изменить состояние var на: 'закрыть'

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

Здесь полное решение с кодом Брендана:

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

Ответ 11

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

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

Ответ 12

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