jQuery Показывает Текстовое поле, Когда Опция Выбрана

У меня есть следующий код:

<select>
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" />

То, что я хочу сделать, использует jQuery, делают текстовое поле ниже скрытого по умолчанию и затем показывают его, если пользователь выбирает другую опцию из выпадающего.

6
задан Cameron 24 March 2010 в 11:34
поделиться

3 ответа

Попробуйте следующее:

<select id="selectbox_id">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" />

JQuery:

$(function(){
  // hide by default
  $('other').css('display', 'none');

  $('selectbox_id').change(function(){
   if ($(this).val() === 'Other') {
     $('other').css('display', 'block');
   }
 });
});
0
ответ дан 8 December 2019 в 12:58
поделиться
<select id="sel">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>

<input type="text" id="other" style="display: none;" />

$('#sel').change(function() {
    $('#other').css('display', ($(this).val() == 'Other') ? 'block' : 'none');
});
7
ответ дан 8 December 2019 в 12:58
поделиться

Здесь нет необходимости в CSS.

$('#sel').change(function() {
    var selected = $(this).val();
    if(selected == 'Other'){
      $('#other').show();
    }
    else{
      $('#other').hide();
    }
});
11
ответ дан 8 December 2019 в 12:58
поделиться
Другие вопросы по тегам:

Похожие вопросы: