изменение выделенного текста раскрывающегося списка при нажатии клавиши со стрелкой

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

<span class="select-wrapper">
<select name="MethodId" id="Status" class="product-select product-select-js">
<option value="">---Select---</option>
<option value="0">GET</option>
<option value="1">POST</option>
<option value="2">FTP</option>
</select>
<span class="holder">POST</span>
</span>

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

Но это работает в google chrome, но не в firefox. И я обнаружил, что это из-за оболочки span для dropdownlist.

Есть у кого-нибудь решение этого вопроса?


keyboard jquery selectedtext dropdownlistfor
person user3848036    schedule 24.02.2015    source источник
comment
поскольку этот вопрос помечен тегом jQuery, я не вижу кода jQuery?   -  person empiric    schedule 24.02.2015
comment
чтобы добавить jquery, я имею в виду, что это нужно исправить с помощью jquery   -  person user3848036    schedule 24.02.2015
comment
@ user3848036, похоже, вы просите кого-то решить проблему за вас, но вы не пробовали решить ее самостоятельно? взломайте это и опубликуйте, что вы пытаетесь и какие проблемы у вас возникают   -  person workabyte    schedule 24.02.2015

Ответы (1)


arrow_upward
1
arrow_downward

Итак, чтобы разбить это на этапы, сначала вам нужно включить jQuery на свою страницу.

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

Затем в прослушивателе событий вы захотите получить значение из раскрывающегося списка.

Затем вы захотите установить значение диапазона.

тогда вы получите что-то вроде

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-2.1.3.js"></script>
        <script>
            $(function() {
                $('#Status').on('change keyup', updateValue);
            });
            function updateValue() {
                $('.holder').text($(this).find(':selected').text());
            }
        </script>
    </head>
    <body>
        <span class="select-wrapper">
            <select name="MethodId" id="Status" class="product-select product-select-js">
                <option value="">---Select---</option>
                <option value="0">GET</option>
                <option value="1">POST</option>
                <option value="2">FTP</option>
            </select>
            <span class="holder"></span>
        </span>
    </body>
    </html>
person workabyte    schedule 24.02.2015
comment
Привет, рабочий, спасибо за ответ. вы установили значение .holder в событии изменения ddl, но событие изменения ddl не запускается, когда мы действительно меняем с помощью клавиш со стрелками на клавиатуре. вот почему у меня возникают трудности с этим. - person user3848036; 25.02.2015
comment
@ user3848036 см. мои изменения в блоке сценария, в FF событие изменения не запускается, пока вы не выйдете из DDL, когда вы используете клавиши со стрелками для изменения значения, поэтому, если вы не хотите менять фокус, вы захотите привязать как к событию keyup, так и к событию изменения - person workabyte; 25.02.2015