如何根据下拉菜单所做的选择显示/隐藏文本框

Question

我是jquery的新手。我有一个下拉菜单这个不同的选项..当我从下拉列表中选择其他文本框以显示。我怎么能这样做..这是代码..

 <script type="text/javascript">
  $(function() {
$("[name='select1']").on("change", function(){     //listen for change event on the select
    $(".otherprof").toggle(this.value==="other");  //toggle show/hide based on selected value
}).change();


html code
<select name="select1">
    <option value="doctor" id="doctor1">Doctor</option>
    <option value="nurse" id="nurse1">Nurse</option>
    <option value="other" id="other1">Other</option>
</select>
<div class="otherprof">
    <p>Please list your profession:
        <input type="text" name="otherproftext" id="otherproftext" maxlength="20">
    </p>
</div>

在此代码中显示的文本框不会隐藏。你能告诉我其中的错误吗？ 想法是文本框保持隐藏，直到用户点击下拉菜单中的“其他”，这反过来应该立即显示文本框。

Answer 1

/// here is jsfiddle

http://jsfiddle.net/dallu7020/bbeu9/

// here i hav aassumed that you have select bo with selector id...
<select name="select1"  id="selector" >
   <option value="doctor" id="doctor1">Doctor</option>
   <option value="nurse" id="nurse1">Nurse</option>
   <option value="other" id="other1">Other</option>
</select>

<div class="otherprof">
    <p>Please list your profession:
        <input type="text" name="otherproftext" id="otherproftext" maxlength="20">
    </p>
</div>

// jquery

$('#selector').change(function(){ 
    if($(this).val() == "other" )
    {
        $('.otherprof').slideDown();
    }
    else
    {
         $('.otherprof').slideUp();
    }
     });