Я пытаюсь создать меню выпадающего меню, и я застрял, когда я пытаюсь показать текстовое поле, если выбран вариант "другой".
есть то, что у меня есть:
<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
Итак, если пользователь выбирает другой в меню, тогда появляется текстовое поле, как я могу это сделать?
Пытаться
//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/
Если вы уже используете jQuery, просто используйте $('#con-specify').show()
и $('#con-specify').hide()
Вы захотите добавить ссылку 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();
}
});
};