jQuery - 如何根据下拉列表中的值显示文本框答案

【问题标题】：jQuery - how to show a text box based on a value from a drop down listjQuery - 如何根据下拉列表中的值显示文本框
【发布时间】：2014-04-10 18:17:21
【问题描述】：

当页面加载时，我希望隐藏 input textbox，id 为 :amf-input-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)"
/>

【问题讨论】：

标签： jquery forms show-hide

【解决方案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
      }

    });
});

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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();
        }
    })
});

【讨论】：

【解决方案4】：

.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();
    }
});

【讨论】：