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>

以下是包含select和隐藏div的HTML以显示输入：

<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/

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/

显示输入的jQuery选项消失

2 个答案: