Можно ли использовать JS, чтобы открыть HTML-выбор, чтобы отобразить его список параметров?

Можно ли использовать JavaScript, чтобы открыть HTML-выбор, чтобы отобразить его список опций?

Зачем, кстати, нужна эта функциональность? Просто любопытно...

— 10.01.2009 13:34

Одна из причин, по которой это было бы хорошо, - поддержка сочетаний клавиш (что в наши дни делают многие сайты, например, Twitter, GitHub, G +).

— 03.07.2012 06:41

Вы можете использовать клавиатуру, чтобы уже открывать выбранные поля. Обычно (это зависит от вашего браузера) вы переходите к полю, а затем нажимаете стрелку вниз или вверх, чтобы открыть выбор и прокрутить параметры.

— 09.07.2012 20:02

@DarrylHein, стрелки вверх и вниз не работают для моего раскрывающегося списка в моей таблице данных .... Я бы хотел, чтобы они сделали, я пытался назначить стрелки функции, если функция существовала ...

— 25.07.2014 22:31

javascript html-select

10.01.2009 03:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

127

158 638

Перейти к ответу Данный вопрос помечен как решенный

Ответы 10

Ответ принят как подходящий

К сожалению, на этот вопрос есть простой ответ - «Нет».

уверен в этом?

— 10.01.2009 03:42

Не может быть сделано (с обычным html / javascript)

— 10.01.2009 04:26

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

— 09.12.2010 02:23

это неправильный ответ на этот вопрос, следующая ссылка даст вам ответ stackoverflow.com/questions/249192/…

— 08.08.2015 13:26

Технически это правильный ответ, это невозможно. Но если вы хотите, чтобы вам казалось, что вы просмотрели ответ ниже: stackoverflow.com/a/1489537/151503

— 09.11.2015 19:18

проверьте здесь рабочий пример jsfiddle.net/oscarj24/GR9jU

— 01.03.2016 23:09

@Amit не работает в FF

— 10.01.2017 19:34

@Amit не работает (больше) в Chrome (с использованием v55)

— 20.01.2017 16:57

Точнее всего сказать, что среди всех основных браузеров нет хорошо поддерживаемого метода (по состоянию на 19.04.2017). @Asaf David предоставил метод, который работает в FireFox, поэтому он явно возможен в незначительном количестве вариантов использования.

— 20.04.2017 00:57

Спасибо за TL; DR :)

— 24.05.2018 16:54

Вы знаете какой-либо контекст вокруг этого? Это запрещено по соображениям безопасности? Не удалось ли объединить стандарт для его реализации? Это технически невозможно из-за каких-то непонятных технических ограничений? Другими словами, просто Зачем?

— 07.10.2019 09:13

Бесполезный ответ без каких-либо объяснений.

— 08.09.2020 20:20

10.01.2009 03:20

Я почти уверен, что ответ: нет. Вы можете выбирать параметры с помощью JavaScript, но не открывать выбор. Вам придется использовать индивидуальное решение.

10.01.2009 03:21

У меня была эта проблема ... и я нашел работоспособное решение.

Я не хотел, чтобы поле выбора отображалось, пока пользователь не щелкнет какой-нибудь простой HTML. Итак, я наложил на выбранный элемент opacity=.01. После нажатия я снова поменял его на opacity=100. Это позволило мне скрыть выбор, и когда пользователь щелкнул текст, появился выбор с отображаемыми параметрами.

Разве это не просто скрытие / отображение фактического поля выбора? Вопрос в том, чтобы показать / открыть список опций.

— 29.09.2009 02:29

Мой метод показывает / открывает список параметров вместе с самим полем выбора. Единственный способ открыть список параметров - щелкнуть поле выбора. Этого я добился, невидимо наложив выделение поверх некоторого целевого текста.

— 29.09.2009 19:24

Это было единственное решение, способное стилизовать кнопку меню выбора в глючном WebView Android. Спасибо!

— 16.06.2013 20:34

Спасибо, искал пару часов. Это должен быть принятый ответ!

— 10.07.2014 13:48

Это не отвечает на вопрос, но ДЕЙСТВИТЕЛЬНО представляет обходной путь для случая, когда вы хотите стилизовать элемент <select>, по-прежнему предоставляя собственный элемент управления, что является причиной, по которой вы можете захотеть открыть раскрывающийся список параметров с помощью js . Если вы установите непрозрачность <select> на 0, когда пользователь щелкает невидимый выбор, выпадающий список параметров будет отображаться как обычно.

— 21.07.2015 17:57

Фил или @ChrisSnyder, было бы неплохо предоставить рабочий jsfiddle. Кроме того, должен ли пользователь на самом деле щелкать (я полагаю, что большинство читателей здесь хотят избежать) или это может быть смоделировано / инициировано другим событием? Моя цель - получить раскрывающееся меню «Instagrow» - немедленно показать его эффект - после выбора строки «Показать дополнительные параметры ...» в конце списка.

— 13.12.2016 00:52

да, я не уверен, как это решает исходный вопрос, можете ли вы предоставить образец кода? Спасибо!

— 10.12.2018 20:22

Это прекрасно работает на мобильных устройствах; намного лучше, чем стандартный выпадающий список каменного века. Я использовал полноэкранный div для элемента подложки, поместил внутри него полноэкранное изображение, добавил заголовок с абсолютным позиционированием, затем положил выбор поверх него, также с абсолютным позиционированием и 100% шириной / высотой, чтобы пользователь мог нажмите в любом месте на нем. Список всплывает над изображением. Очень приятно.

— 20.04.2020 19:12

29.09.2009 01:44

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

Вот 2 функции javascript

function expand(obj)
{
    obj.size = 5;
}
function unexpand(obj)
{
    obj.size = 1;
}

затем я создаю поле выбора

<select id = "test" multiple = "multiple" name = "foo" onFocus = "expand(this)" onBlur = "unexpand(this)">
<option >option1</option>
<option >option2</option>
<option >option3</option>
<option >option4</option>
<option >option5</option>
</select>

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

ps / fyi Я не тестировал приведенный выше код (я создаю свое поле выбора динамически), а код, который я написал, был протестирован только в FireFox.

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

— 09.10.2009 23:05

Привет, спасибо, Чад! Ваши комментарии помогли мне решить проблему! Хотел бы я поставить +1 тебе в ответ;)

— 09.10.2009 23:42

В моем случае это не решило бы проблему точно, но это был бы вариант. +1

— 10.10.2009 02:07

@DarrylHein: В данном случае это не просто опция ан, это 5 <option> ...

— 07.06.2013 15:45

очень хитро, спасибо.

— 11.05.2017 14:40

09.10.2009 22:56

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

<script>     
         $(document).ready(function()
           {
          document.getElementById('select').size=3;
           });
    </script>

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

— 05.11.2012 06:28

~ Рис, спасибо! это привело меня к большему количеству идей. Попробуйте это, он будет установлен на точную высоту, необходимую для элементов управления выбора. $ ("выберите: видимый"). each (function (i, e) {e.size = e.length;});

— 03.06.2013 15:22

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

— 14.04.2015 05:26

24.10.2012 05:48

//use jquery
$select.trigger('mousedown')

Протестировали в Firefox 37 и Chrome 41, чтобы убедиться, что в настоящее время это не работает.

— 09.04.2015 10:40

Может пора этот ответ удалить.

— 10.01.2017 22:00

В ванильном js это будет $select.dispatchEvent(new MouseEvent('mousedown', { bubbles: true })), поэтому jquery не нужен. Тем не менее, код не открывает раскрывающийся список по соображениям безопасности.

— 13.04.2020 22:08

09.04.2013 15:57

Это работает в Google Chrome

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

К вашему сведению: у меня это сработало в Chrome 35.0.1916.153. Убедитесь, что вы передаете фактический элемент, а не объект jQuery.

— 03.07.2014 23:30

Это работает и в последней версии Opera на основе Chromium.

— 25.04.2015 19:22

К сожалению, сейчас он устарел на Chrome 53+

— 27.09.2016 22:58

У меня это не сработало на ПК / Mac, но оно работает на мобильных устройствах (и вам также нужно добавить событие mouseup).

— 25.02.2017 13:16

Не работает с Chrome 59 в Windows.

— 20.04.2017 00:54

больше не работает на хроме. все еще работаю над сафари.

— 19.05.2020 13:07

это больше не будет работать. Невозможно отправить событие нажатия мыши выбранному элементу.

— 13.11.2020 06:03

03.01.2014 19:19

Предлагаемое мной решение безопасно, просто и совместимо с Internet Explorer, FireFox и Chrome.

Этот подход новый и законченный. Я не нашел ничего равного этому решению в Интернете. Простой, кроссбраузерный (Internet Explorer, Chrome и Firefox), сохраняет макет, использует сам выбор и прост в использовании.

Примечание: требуется JQuery.

HTML КОД

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
<title>CustonSelect</title>
<script type = "text/javascript" src = "./jquery-1.3.2.js"></script>
<script type = "text/javascript" src = "./CustomSelect.js"></script>
</head>
<div id = "testDiv"></div>
<body>
    <table>
        <tr>
            <td>
                <select id = "Select0" >
                    <option value = "0000">0000</option>
                    <option value = "0001">0001</option>
                    <option value = "0002">0002</option>
                    <option value = "0003">0003</option>
                    <option value = "0004">0004</option>
                    <option value = "0005">0005</option>
                    <option value = "0006">0006</option>
                    <option value = "0007">0007</option>
                    <option value = "0008">0008</option>
                    <option value = "0009">0009</option>
                    <option value = "0010">0010</option>
                    <option value = "0011">0011</option>
                    <option value = "0012">0012</option>
                    <option value = "0013">0013</option>
                    <option value = "0014">0014</option>
                    <option value = "0015">0015</option>
                    <option value = "0016">0016</option>
                    <option value = "0017">0017</option>
                    <option value = "0018">0018</option>
                    <option value = "0019">0019</option>
                    <option value = "0020">0020</option>
                    <option value = "0021">0021</option>
                    <option value = "0022">0022</option>
                    <option value = "0023">0023</option>
                    <option value = "0024">0024</option>
                    <option value = "0025">0025</option>
                    <option value = "0026">0026</option>
                    <option value = "0027">0027</option>
                    <option value = "0028">0028</option>
                    <option value = "0029">0029</option>
                    <option value = "0030">0030</option>
                    <option value = "0031">0031</option>
                    <option value = "0032">0032</option>
                    <option value = "0033">0033</option>
                    <option value = "0034">0034</option>
                    <option value = "0035">0035</option>
                    <option value = "0036">0036</option>
                    <option value = "0037">0037</option>
                    <option value = "0038">0038</option>
                    <option value = "0039">0039</option>
                    <option value = "0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id = "Select1" >
                    <option value = "0000">0000</option>
                    <option value = "0001">0001</option>
                    <option value = "0002">0002</option>
                    <option value = "0003">0003</option>
                    <option value = "0004">0004</option>
                    <option value = "0005">0005</option>
                    <option value = "0006">0006</option>
                    <option value = "0007">0007</option>
                    <option value = "0008">0008</option>
                    <option value = "0009">0009</option>
                    <option value = "0010">0010</option>
                    <option value = "0011">0011</option>
                    <option value = "0012">0012</option>
                    <option value = "0013">0013</option>
                    <option value = "0014">0014</option>
                    <option value = "0015">0015</option>
                    <option value = "0016">0016</option>
                    <option value = "0017">0017</option>
                    <option value = "0018">0018</option>
                    <option value = "0019">0019</option>
                    <option value = "0020">0020</option>
                    <option value = "0021">0021</option>
                    <option value = "0022">0022</option>
                    <option value = "0023">0023</option>
                    <option value = "0024">0024</option>
                    <option value = "0025">0025</option>
                    <option value = "0026">0026</option>
                    <option value = "0027">0027</option>
                    <option value = "0028">0028</option>
                    <option value = "0029">0029</option>
                    <option value = "0030">0030</option>
                    <option value = "0031">0031</option>
                    <option value = "0032">0032</option>
                    <option value = "0033">0033</option>
                    <option value = "0034">0034</option>
                    <option value = "0035">0035</option>
                    <option value = "0036">0036</option>
                    <option value = "0037">0037</option>
                    <option value = "0038">0038</option>
                    <option value = "0039">0039</option>
                    <option value = "0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id = "Select2" >
                    <option value = "0000">0000</option>
                    <option value = "0001">0001</option>
                    <option value = "0002">0002</option>
                    <option value = "0003">0003</option>
                    <option value = "0004">0004</option>
                    <option value = "0005">0005</option>
                    <option value = "0006">0006</option>
                    <option value = "0007">0007</option>
                    <option value = "0008">0008</option>
                    <option value = "0009">0009</option>
                    <option value = "0010">0010</option>
                    <option value = "0011">0011</option>
                    <option value = "0012">0012</option>
                    <option value = "0013">0013</option>
                    <option value = "0014">0014</option>
                    <option value = "0015">0015</option>
                    <option value = "0016">0016</option>
                    <option value = "0017">0017</option>
                    <option value = "0018">0018</option>
                    <option value = "0019">0019</option>
                    <option value = "0020">0020</option>
                    <option value = "0021">0021</option>
                    <option value = "0022">0022</option>
                    <option value = "0023">0023</option>
                    <option value = "0024">0024</option>
                    <option value = "0025">0025</option>
                    <option value = "0026">0026</option>
                    <option value = "0027">0027</option>
                    <option value = "0028">0028</option>
                    <option value = "0029">0029</option>
                    <option value = "0030">0030</option>
                    <option value = "0031">0031</option>
                    <option value = "0032">0032</option>
                    <option value = "0033">0033</option>
                    <option value = "0034">0034</option>
                    <option value = "0035">0035</option>
                    <option value = "0036">0036</option>
                    <option value = "0037">0037</option>
                    <option value = "0038">0038</option>
                    <option value = "0039">0039</option>
                    <option value = "0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id = "Select3" >
                    <option value = "0000">0000</option>
                    <option value = "0001">0001</option>
                    <option value = "0002">0002</option>
                    <option value = "0003">0003</option>
                    <option value = "0004">0004</option>
                    <option value = "0005">0005</option>
                    <option value = "0006">0006</option>
                    <option value = "0007">0007</option>
                    <option value = "0008">0008</option>
                    <option value = "0009">0009</option>
                    <option value = "0010">0010</option>
                    <option value = "0011">0011</option>
                    <option value = "0012">0012</option>
                    <option value = "0013">0013</option>
                    <option value = "0014">0014</option>
                    <option value = "0015">0015</option>
                    <option value = "0016">0016</option>
                    <option value = "0017">0017</option>
                    <option value = "0018">0018</option>
                    <option value = "0019">0019</option>
                    <option value = "0020">0020</option>
                    <option value = "0021">0021</option>
                    <option value = "0022">0022</option>
                    <option value = "0023">0023</option>
                    <option value = "0024">0024</option>
                    <option value = "0025">0025</option>
                    <option value = "0026">0026</option>
                    <option value = "0027">0027</option>
                    <option value = "0028">0028</option>
                    <option value = "0029">0029</option>
                    <option value = "0030">0030</option>
                    <option value = "0031">0031</option>
                    <option value = "0032">0032</option>
                    <option value = "0033">0033</option>
                    <option value = "0034">0034</option>
                    <option value = "0035">0035</option>
                    <option value = "0036">0036</option>
                    <option value = "0037">0037</option>
                    <option value = "0038">0038</option>
                    <option value = "0039">0039</option>
                    <option value = "0040">0040</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id = "Select4" >
                    <option value = "0000">0000</option>
                    <option value = "0001">0001</option>
                    <option value = "0002">0002</option>
                    <option value = "0003">0003</option>
                    <option value = "0004">0004</option>
                    <option value = "0005">0005</option>
                    <option value = "0006">0006</option>
                    <option value = "0007">0007</option>
                    <option value = "0008">0008</option>
                    <option value = "0009">0009</option>
                    <option value = "0010">0010</option>
                    <option value = "0011">0011</option>
                    <option value = "0012">0012</option>
                    <option value = "0013">0013</option>
                    <option value = "0014">0014</option>
                    <option value = "0015">0015</option>
                    <option value = "0016">0016</option>
                    <option value = "0017">0017</option>
                    <option value = "0018">0018</option>
                    <option value = "0019">0019</option>
                    <option value = "0020">0020</option>
                    <option value = "0021">0021</option>
                    <option value = "0022">0022</option>
                    <option value = "0023">0023</option>
                    <option value = "0024">0024</option>
                    <option value = "0025">0025</option>
                    <option value = "0026">0026</option>
                    <option value = "0027">0027</option>
                    <option value = "0028">0028</option>
                    <option value = "0029">0029</option>
                    <option value = "0030">0030</option>
                    <option value = "0031">0031</option>
                    <option value = "0032">0032</option>
                    <option value = "0033">0033</option>
                    <option value = "0034">0034</option>
                    <option value = "0035">0035</option>
                    <option value = "0036">0036</option>
                    <option value = "0037">0037</option>
                    <option value = "0038">0038</option>
                    <option value = "0039">0039</option>
                    <option value = "0040">0040</option>
                </select>
            </td>
        </tr>
    </table>
    <input type = "button" id = "Button0" value = "MoveLayout!"/>
</body>
</html>

КОД JAVASCRIPT

var customSelectFields = new Array();


// Note: The list of selects to be modified! By Questor
customSelectFields[0] = "Select0";
customSelectFields[1] = "Select1";
customSelectFields[2] = "Select2";
customSelectFields[3] = "Select3";
customSelectFields[4] = "Select4";

$(document).ready(function()
{


    //Note: To debug! By Questor
    $("#Button0").click(function(event){ AddTestDiv(); });

    StartUpCustomSelect(null);  

});


//Note: To test! By Questor
function AddTestDiv()
{
    $("#testDiv").append("<div style=\"width:100px;height:100px;\"></div>");
}


//Note: Startup selects customization scheme! By Questor
function StartUpCustomSelect(what)
{

    for (i = 0; i < customSelectFields.length; i++)
    {

        $("#" + customSelectFields[i] + "").click(function(event){ UpCustomSelect(this); });
        $("#" + customSelectFields[i] + "").wrap("<div id=\"selectDiv_" + customSelectFields[i] + "\" onmouseover=\"BlockCustomSelectAgain();\" status=\"CLOSED\"></div>").parent().after("<div id=\"coverSelectDiv_" + customSelectFields[i] + "\" onclick=\"UpOrDownCustomSelect(this);\" onmouseover=\"BlockCustomSelectAgain();\"></div>");


        //Note: Avoid breaking the layout when the CSS is modified from "position" to "absolute" on the select! By Questor
        $("#" + customSelectFields[i] + "").parent().css({'width': $("#" + customSelectFields[i] + "")[0].offsetWidth + 'px', 'height': $("#" + customSelectFields[i] + "")[0].offsetHeight + 'px'});

        BlockCustomSelect($("#" + customSelectFields[i] + ""));

    }
}


//Note: Repositions the div that covers the select using the "onmouseover" event so 
//Note: if element on the screen move the div always stand over it (recalculate! By Questor
function BlockCustomSelectAgain(what)
{
    for (i = 0; i < customSelectFields.length; i++)
    {
        if ($("#" + customSelectFields[i] + "").parent().attr("status") == "CLOSED")
        {
            BlockCustomSelect($("#" + customSelectFields[i] + ""));
        }
    }
}


//Note: Does not allow the select to be clicked or clickable! By Questor
function BlockCustomSelect(what)
{

    var coverSelectDiv = $(what).parent().next();


    //Note: Ensures the integrity of the div style! By Questor
    $(coverSelectDiv).removeAttr('style');


    //Note: To resolve compatibility issues! By Questor
    var backgroundValue = "";
    var filerValue = "";
    if (navigator.appName == "Microsoft Internet Explorer")
    {
        backgroundValue = 'url(fakeimage)';
        filerValue = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=\'scale\', src=\'fakeimage\' )';
    }


    //Note: To debug! By Questor
    //'border': '5px #000 solid',

    $(coverSelectDiv).css({
        'position': 'absolute', 
        'top': $(what).offset().top + 'px', 
        'left': $(what).offset().left + 'px', 
        'width': $(what)[0].offsetWidth + 'px', 
        'height': $(what)[0].offsetHeight + 'px', 
        'background': backgroundValue,
        '-moz-background-size':'cover',
        '-webkit-background-size':'cover',
        'background-size':'cover',
        'filer': filerValue
    });

}


//Note: Allow the select to be clicked or clickable! By Questor
function ReleaseCustomSelect(what)
{

    var coverSelectDiv = $(what).parent().next();

    $(coverSelectDiv).removeAttr('style');
    $(coverSelectDiv).css({'display': 'none'});

}


//Note: Open the select! By Questor
function DownCustomSelect(what)
{


    //Note: Avoid breaking the layout. Avoid that select events be overwritten by the others! By Questor
    $(what).css({
        'position': 'absolute', 
        'z-index': '100'
    });


    //Note: Open dropdown! By Questor
    $(what).attr("size","10");

    ReleaseCustomSelect(what);


    //Note: Avoids the side-effect of the select loses focus.! By Questor
    $(what).focus();


    //Note: Allows you to select elements using the enter key when the select is on focus! By Questor
    $(what).keyup(function(e){
        if (e.keyCode == 13)
        {
            UpCustomSelect(what);
        }
    });


    //Note: Closes the select when loses focus! By Questor
    $(what).blur(function(e){
        UpCustomSelect(what);
    });

    $(what).parent().attr("status", "OPENED");

}


//Note: Close the select! By Questor
function UpCustomSelect(what)
{

    $(what).css("position","static");


    //Note: Close dropdown! By Questor
    $(what).attr("size","1");

    BlockCustomSelect(what);

    $(what).parent().attr("status", "CLOSED");

}


//Note: Closes or opens the select depending on the current status! By Questor
function UpOrDownCustomSelect(what)
{

    var customizedSelect = $($(what).prev().children()[0]);

    if ($(what).prev().attr("status") == "CLOSED")
    {
        DownCustomSelect(customizedSelect);
    }
    else if ($(what).prev().attr("status") == "OPENED")
    {
        UpCustomSelect(customizedSelect);
    }

}

Я создал jsfiddle с этим, и он, похоже, не работает ... jsfiddle.net/rL53xj11

— 30.09.2015 22:07

У меня тоже не сработало.

— 13.12.2016 00:47

@JonCoombs Да, работает. У меня есть клиентское приложение, в котором это решение работает отлично. Однако учтите, что этому коду уже 2 года. Я рекомендую самостоятельно протестировать html-файл на вашем локальном компьютере. Также обратите внимание на версию вашего jquery.

— 16.12.2016 21:42

@EduardoLucio Можете ли вы преобразовать это в пример кода здесь?

— 15.07.2019 02:03

@ 1.21gigawatts Вернитесь к "базовому" = D! Создайте папку. Загрузите «jquery-1.3.2.js» code.jquery.com/jquery-1.3.2.js, создав файл («my.htm») с содержимым «HTML CODE» и файл («CustomSelect.js») с содержимым «JAVASCRIPT CODE». Поместите все в созданную вами папку. Дважды щелкните «my.htm», чтобы открыть его в браузере. Сделанный! Спасибо! = D

— 16.07.2019 22:48

23.01.2014 06:40

После попыток решить эту проблему в течение некоторого времени мне удалось найти рабочее решение, которое также является действительным:

var event = new MouseEvent('mousedown');
element.dispatchEvent(event);

Я также пытался реализовать это в JQuery, используя trigger и mousedown или только mousedown, но безуспешно.

Похоже, это не работает в Firefox 50.

— 13.01.2017 20:28

Не работает с Chrome 59 в Windows. Хотя работает с FireFox 51 в Windows.

— 20.04.2017 00:54

09.05.2016 15:55

<select id = "myDropDown">
  <option>html5</option>
  <option>javascript</option>
  <option>jquery</option>
  <option>css</option>
  <option>sencha</option>
</select>

По jQuery:

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

По javascript:

var myDropDown=document.getElementById("myDropDown");
var length = myDropDown.options.length;
//open dropdown
myDropDown.size = length;
//close dropdown
myDropDown.size = 0;

Скопировано с: Открыть закрыть выбрать

Это не открытие выбора, это его расширение.

— 16.08.2018 15:22

10.04.2018 00:00