JQuery: изменить значение CSS, если опция выбрана

0

Я пытаюсь создать меню выпадающего меню, и я застрял, когда я пытаюсь показать текстовое поле, если выбран вариант "другой".

есть то, что у меня есть:

<span id="con-country"><label for="country">Country: </label>
<select name="country" required="required">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option id="other" value="other">Other</option>
</select>
</span>

<span id="con-specify">
<label for="specify">Specify: </label>
<input type="text" name="specify" id="c-specify" required="required"></input>
</span>

CSS:

#con-specify{
    margin-left: 50px;
    display: none;
}

Просто ха?, проблема в том, что я не знаю, как сделать код в jQuery

Итак, если пользователь выбирает другой в меню, тогда появляется текстовое поле, как я могу это сделать?

  • 0
    Что вы пробовали? Кроме того, это может помочь воспринимать это как множественные проблемы: «Как мне что-то сделать, когда пользователь выбирает параметр?», «Как проверить, какой параметр был выбран?», «Как получить элемент HTML?» , "Как я могу изменить CSS элемента?"
Теги:
menu

3 ответа

1

Пытаться

//dom ready handler
jQuery(function($){
    //change event handler for the select
    $('select[name="country"]').change(function(){
        //set the visibility of the specify element based on the value of select
        $('#con-specify').toggle(this.value == 'other')
    }).change();//fire the change event so that the initial visibility is set
})

Демо: скрипка

Подробнее о каждом из методов см. Http://api.jquery.com/

0

Если вы уже используете jQuery, просто используйте $('#con-specify').show() и $('#con-specify').hide()

0

Вы захотите добавить ссылку jQuery в начало html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

Выпадающее меню должно иметь идентификатор (т.е.: страна).

Тогда ваш javascript будет выглядеть примерно так:

    window.onload = function() {
      $('#con-specify').hide();

      $('#country').change(function(){
        if($(this).val() == 'other') {
            $('#con-specify').show();
        } else {
            $('#con-specify').hide();
        }
      });
    };

Ещё вопросы

Сообщество Overcoder
Наверх
Меню