2015-02-24 7 views
0

У меня есть Dropdownlist. Я добавил класс оболочки в это выпадающее меню. И этот класс добавил диапазон после выпадающего списка, чтобы отобразить выделенный текст.dropdownlist выделенное изменение текста при нажатии клавиши со стрелкой

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

И я хочу изменить клавиши текста клавиатуры стрелка DROPDOWNLIST выбран (вверх, вниз, влево, вправо) пресс-конференцию.

Но это работает в google chrome, но не в firefox. И я обнаружил, что это из-за оболочки span для dropdownlist.

У кого-нибудь есть решение этой проблемы?

+2

так как этот вопрос помечен JQuery, я не вижу никакого кода JQuery? – empiric

+0

добавить jquery Я имею в виду, что это должно быть исправлено jQuery – user3848036

+0

@ user3848036, похоже, вы просите кого-то решить проблему за вас, но вы не пытались ее решить самостоятельно? взломать его и опубликовать то, что вы пытаетесь и какие проблемы у вас есть – workabyte

ответ

0

Итак, чтобы разбить это поэтапно, сначала вам нужно include jQuery on your page.

Тогда вы можете использовать jQuery для add an event listener для вашего 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> 
+0

hi workabyte, спасибо за ваш ответ. Вы установите значение .holder в событии изменения ddl, но событие изменения ddl не срабатывает, когда мы меняем клавиши со стрелками клавиатуры поэтому я затрудняюсь это сделать. – user3848036

+0

@ user3848036 см. Мое редактирование в блоке сценария, в FF событие изменения не запускается, пока вы не покинете DDL, когда вы используете клавиши со стрелками, чтобы изменить значение, поэтому, если вы не хотите менять фокус, тогда вы захотите для привязки к событию keyup и событию изменения – workabyte

+0

спасибо workabyte, он работает. – user3848036