Javascript jQuery скрывает элементы формы на основе выбранного элемента

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь создать форму, в которой, когда кто-то выбирает «Другое» в качестве своего заголовка, появляется окно для ввода заголовка. Первая часть моего скрипта работает для того, чтобы сделать div скрытым для начала, но я не могу заставить работать вторую часть, в которой при выборе «Другое» появляется текстовое поле.

Любая помощь будет оценена.

Вот мой HTML:

             <div>
                <label for="title" class="label">Title</label>
                <select name="title" id="title">
                <option></option>
                <option value="mr">Mr.</option>
                <option value="mrs">Mrs.</option>
                <option value="miss">Miss.</option>
                <option value="ms">Ms.</option>
                <option value="dr">Dr.</option>
                <option value="lady">Lady.</option>
                <option value="rev">Rev.</option>
                <option value="sir">Sir.</option>
                <option value="other">Other</option>
                </select>
                <input name="other_title" style="margin-left:10px;" type="text" id="other_title" size="10">
            </div>

Вот мой Javascript / jQuery:

 <script>
    jQuery(function( $ ) {
        $('#other_title').hide('fast');
        $(function() {
            if ($('#title option:selected').text() == 'other') {
                $('#other_title').show('fast');
            }
        }); // end function
    });
</script>

1. Вам не хватает обработчика событий.

2. Это для того, чтобы сообщить функции о фактическом запуске? Под этим я подразумеваю, настроил ли я его, но не сказал, что должно его отключить?

3. это своего рода действие, запускаемое при нажатии кнопки, установке флажка / переключателя, фокусировке текстового поля и т. Д., Событиях . Внутри вы можете написать, что нужно сделать.

Ответ №1:

Поможет ли это?

 $('#title').on('change', function() {
    if ($(this).val() == 'other') $('#other_title').show('fast');
    else $('#other_title').hide('fast'); // This too?
});

Редактировать: исправлена синтаксическая ошибка. : p

Ответ №2:

Попробуйте использовать событие изменения и заменить

 if ($('#title option:selected').text() == 'other')

 if ($('#title>option:selected').text() == 'other')

Вы можете обратиться к plunkr для справки:
https://plnkr.co/edit/R2w25NEwUbiw00r2lEs3