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>

そして、ドロップダウンリストで選択されたテキストキーボードの矢印キー(上、下、左、右)プレスイベントを変更したいと思います。

しかし、これはgoogle chromeでは機能しますが、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 に答える