jQuery的 - 如何顯示基於值從下拉列表

Question

一個文本框頁面加載時我想input textbox要隱藏的ID爲：AMF-輸入othertitle_19

但是，如果用戶挑選從上面的文本框的下拉列表中選擇一個確定的值（「其他」），以便他們可以填寫該框中的信息。

下面的代碼下拉列表：

<select name="title_3" id="amf-input-title_3"> 
    <option value="Title" id="title_3-0">Title</option> 
    <option value="Mr" id="title_3-1">Mr</option> 
    <option value="Mrs" id="title_3-2">Mrs</option> 
    <option value="Miss" id="title_3-3">Miss</option> 
    <option value="Ms" id="title_3-4">Ms</option> 
    <option value="Dr" id="title_3-5">Dr</option> 
    <option value="Professor" id="title_3-6">Professor</option> 
    <option value="Other" id="title_3-7">Other</option> 

文本框隱藏/顯示：

<input type="text" class="text" 
    name="othertitle_19" id="amf-input-othertitle_19" 
    value="" placeholder="Please specify other...." 
    maxlength="255" 
    onkeyup="if (this.length>255) this.value=this.value.substr(0, 255)" 
    onblur="this.value=this.value.substr(0, 255)" 
/> 

Answer 1

$(document).ready(function(){ 
    $('#amf-input-othertitle_19').hide(); //Hide on PageLoad 

    $('#amf-input-title_3').change(function(){ 
     if($(this).val() == 'Other'){ 
     $('#amf-input-othertitle_19').show(); //show if dropdown = other 
     } 
     else{ 
     $('#amf-input-othertitle_19').hide(); //hide if changed to something else 
     } 

    }); 
}); 

Answer 2

.change()

var inp = $('#amf-input-othertitle_19'); 
$('#mf-input-title_3').change(function() { 
    if (this.value == 'other') { //check selected value 
     inp.show(); 
    } else { 
     inp.hide(); 
    } 
}); 

Answer 3

您需要觀看select的ID，並顯示它當它被選中時

$('document').ready(function() { 
    $('#amf-input-title_3').change(function() { 
     if($(this).val() == 'Other') { 
      $('#amf-input-othertitle_19').fadeIn(); 
     } 
     else{ 
      $('#amf-input-othertitle_19').fadeOut(); 
     } 
    }) 
}); 

Answer 4

的JavaScript：

// Shorthand for $(document).ready(function() { ... }); 
$(function() { 

    // It's more efficient to save off the jQuery object 
    // than to re-traverse the DOM each time. 
    var $input = $('#amf-input-othertitle_19'); 

    // Catch the change on <select /> change 
    $('#amf-input-title_3').on('change', function() { 

     // Quick little ternary operator... 
     (this.value === "other") ? $input.show() : $input.hide(); 
    }); 
}); 

CSS：

// Make sure to hide the input on initial load... 
#amf-input-othertitle_19 { 
    display: none; 
} 

JSFiddle