1

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 ?

Jojodmo
  • 23,357
  • 13
  • 65
  • 107
user3848036
  • 169
  • 2
  • 6
  • 17
  • 2
    since this question is tagged with jQuery, I don't see any jQuery code ? – empiric Feb 24 '15 at 15:13
  • to add jquery I mean this should be fix by jquery – user3848036 Feb 24 '15 at 15:33
  • @user3848036, seems like you are asking someone to solve the problem for you but you have not tried to solve it yourself? take a hack at it and post what you try and what issues you are having – workabyte Feb 24 '15 at 15:50

1 Answers1

1

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>
Community
  • 1
  • 1
workabyte
  • 3,496
  • 2
  • 27
  • 35
  • hi workabyte,thanks for your reply.you set the .holder value in ddl change event but ddl change event is not firing when we do change by keyboard's arrow keys.that's why I am getting difficulty to do that. – user3848036 Feb 25 '15 at 06:51
  • @user3848036 see my edit to the script block, in FF the change event is not fired until you leave the DDL when you use the arrow keys to change the value so if you do not want to have to change the focus then you will want to bind to both the keyup event and the change event – workabyte Feb 25 '15 at 17:02