按下箭头键时下拉列表选定的文本更改

Question

我有一个 Dropdownlist.I 已添加包装器 class dropdown.And 此 class 在下拉列表后添加了跨度以显示所选文本。

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

And I want to change the dropdownlist selected text keyboard arrow keys(up,down,left,right) press event.

But this is working in google chrome but not in firefox.And I found that this is because of the span wrapper for dropdownlist.

有人解决这个问题吗？

Answer 1

因此，要分步分解，首先您需要 include jQuery on your page。

那你可以用jQuery到add an event listener to your drop down box。

然后在事件侦听器中你会想要 get the value of the drop down box..

那么你会想要set the value of your span.

那么你最终会得到类似

的结果

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

按下箭头键时下拉列表选定的文本更改

dropdownlist selected text change on arrow key press

jquery

keyboard

dropdownlistfor

selectedtext