[SOLVED] dropdownlist selected text change on arrow key press

dropdownlist selected text change on arrow key press

I have a Dropdownlist.I have added wrapper class on that dropdown.And this class added span after dropdownlist to show selected text.

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

Is anyone has solution of this issue ?

Solution

So to break this down in steps, first you need to include jQuery on your page.

Then you can use jQuery to add an event listener to your drop down box.

Then in the event listener you will want to get the value of the drop down box..

Then you will want to set the value of your span.

then you will end up with something like

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