显示输入的 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，它包含 select 以及隐藏的 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 时显示输入。所以这是代码:

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

    $selector.change(function() {
        var showOther = $('option.other').is(':selected');
        $('#other').toggle(showOther);
    });
});

为此，您应该从一开始就隐藏输入，并让 jQuery.toggle()做好它的工作。

.hideme {
    display: none;
}

http://jsfiddle.net/kWSrh/