1

我有一个下拉列表。我在该下拉列表上添加了包装类。并且这个类在下拉列表之后添加了跨度以显示选定的文本。

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

我想更改下拉列表中选定的文本键盘箭头键（上、下、左、右）按下事件。

但这在谷歌浏览器中有效，但在 Firefox 中无效。我发现这是因为下拉列表的跨度包装器。

有人有这个问题的解决方案吗？

4

1 回答 1

1

所以要分步分解，首先你需要在你的页面中包含 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>
于 2015-02-24T16:09:39.967 回答