2010-03-18 3 views
1

У меня есть элемент формы выбора с 5 вариантами. Если выбрана опция 2, я хочу отобразить другое окно ввода формы (это имеет стиль отображения: ни один изначально). Как я могу присоединить событие к опции 2, чтобы всякий раз, когда он был выбран, окно ввода отображается в противном случае, оно скрыто. У меня это в настоящее время, но это не обрабатывает опция 2 уже выбран при загрузке страницыJquery attach показать событие, чтобы выбрать опцию

$('#type').change(function(){ 
     var typeSelected = $(this).val(); 
     if (typeSelected == 2) { 
      $('#extraInput').show(); 
     } 
    }); 

Я знаю, что я мог бы добавить еще немного кода, который проверяет, что выбран на странице загрузки, но интересуется, есть ли аккуратнее способ сделать это. Кроме того, что-то, что может обрабатывать скрытие поля ввода, если параметр 2 не выбран в начале, так как в настоящее время у меня есть только жестко закодированный стиль = «display: none» на поле ввода, но я бы предпочел, чтобы это было динамическим.

Благодаря

ответ

2

ваш код должен выглядеть следующим образом: DEMO:http://jsbin.com/ezolu4/edit

$(function() { 

     $('#type').change(function() { 
      var typeSelected = $(this).val(); 

      if (typeSelected == 2) { 
       $('#extraInput').fadeIn(200); 
      } else { 
      $('#extraInput').fadeOut(200); 
      } 
     }).change(); 
    }); 

Ops .. У меня есть для вас решение!

+0

спасибо, что это сработало. просто вопрос, какова цель $ (function() {в начале кода? Также есть .change(); в конце кода, просто используемого для автоматического запуска изменения объекта типа точно так же как функция триггера в приведенном выше ответе делает? – John

+0

$ (function() {}); точно так же, как DOM ready! $ (document) .reday (function() {}); он сообщает сценарию, что при загрузке страницы должен что-то выполнить! –

2

Что делать, если вы пытаетесь $('#type').trigger('change'); на странице загрузки? Решает ли эта проблема?

$('#type').trigger('change'); 
$('#type').change(function(){ 
    var typeSelected = $(this).val(); 
    if (typeSelected == 2) { 
     $('#extraInput').show(); 
    } else { 
     $('#extraInput').hide(); 
    } 
}); 
3

Вы могли бы хотеть попробовать:

$('#type').change(function(){ 
      var typeSelected = $(this).val(); 
      if (typeSelected == 2) { 
       $('#extraInput').show(); 
      } 
      else{ 
      $('#extraInput').hide(); 
      } 
     }); 

Как ваш HTML выглядит <option>Option name</option> или

<option value="0">Option name</option> 

Обратитесь к моему предыдущему ответу:

Submit form to 2 different action page

Чтобы сравнить, какой вариант вы выбрали, вам нужно иметь значение параметра.

+0

John

Смежные вопросы