jQuery Hiện một Textbox Khi một tùy chọn được chọn

Question

Tôi đã đoạn mã sau:

<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" /> 

Những gì tôi muốn làm là sử dụng jQuery làm ô bên dưới ẩn theo mặc định, và sau đó hiển thị nó nếu người dùng lựa chọn tùy chọn khác từ trình đơn thả xuống.

Answer 1

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

Answer 2

Hãy thử điều này:

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

Answer 3

Không cần bất kỳ css đây.

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