Jquery прикрепить шоу событие, чтобы выбрать опцию - PullRequest
Новая
       8

Jquery прикрепить шоу событие, чтобы выбрать опцию

1 голос
/ 18 марта 2010

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

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

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

Спасибо

Ответы [ 3 ]

3 голосов
/ 18 марта 2010

Вы можете попробовать: 

  $('#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>

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

Отправить форму на 2 разные страницы действий

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

2 голосов
/ 18 марта 2010

ваш код должен выглядеть так: ДЕМО: http://jsbin.com/ezolu4/edit 

$(function() {

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

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

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

2 голосов
/ 18 марта 2010

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

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