选择选项时jQuery显示文本框

Question

我有以下代码:

<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默认隐藏下面的文本框,然后在用户从下拉列表中选择其他选项时显示它.

Answer 1

这里不需要任何CSS.

$('#sel').change(function() {
    var selected = $(this).val();
    if(selected == 'Other'){
      $('#other').show();
    }
    else{
      $('#other').hide();
    }
});

Answer 2

<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');
});