jQuery選項顯示輸入消失

Question

我有這個簡單的<select>應該顯示一個輸入，如果選擇「其他」選項。但是，如果我打開/關閉選擇，或選擇其他選項，「其他」消失。

這裏就是我的意思是：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var $milestones = $(".other"), 
     $selector = $('#source'); 

    $selector.change(function() { 
     var selected = $selector.find('option:selected').attr('class'); 

     $milestones.hide(); 
     $('#' + selected).show(); 
    }); 
}); 
</script> 

及以下HTML保存選擇以及隱藏div來顯示輸入：

<div class="field text"> 
    <label>Where did you hear about us?</label> 
    <select name="source" id="source"> 
     <option value="Facebook">Facebook</option> 
     <option value="Twitter">Twitter</option> 
     <option value="Other" class="other">Other</option> 
    </select> 
</div> 
<div class="field text"> 
    <div id="other" class="hideme"> 
     <label>Sources:</label><input type="email"> 
    </div> 
</div> 

Answer 1

我猜你想在選擇option.other顯示輸入。因此，這裏是代碼：

，併爲此目的，你應該隱藏從開始輸入，讓jQuery.toggle()完成其工作。

.hideme { 
    display: none; 
} 

http://jsfiddle.net/kWSrh/

Answer 2

你被隱藏在你.other元素，而不是輸入框。看看這些變化。

$(document).ready(function(){ 
    $('.hideme').hide(); 
    $selector = $('#source'); 

    $selector.change(function() { 
    var selected = $selector.find('option:selected').attr('class'); 

    $('.hideme').hide(); 
    $('#' + selected).show(); 
    }); 
}); 

http://jsfiddle.net/sBw5X/