javascript - jQuery -标签 - 无法触发回调“取消选择”或“聚焦”

Question

http://jsfiddle.net/t9fmA/1/ - 演示

你好，

我有一个<select>+<option>列表，如果用户选择Other，下面会出现一个输入框。这部分工作正常，因为我.click()在<option>. 但是，一旦我们选择了 Other 以外的其他内容，我希望输入框消失。

我试过.blur()了，但这似乎不起作用。

有任何想法吗？

这是HTML

<label for="product">Product: </label>
<select id="product">
    <option value="">375 ml</option>
    <option value="">500 ml</option>
    <option value="">750 ml</option>
    <option value="">1 L</option>
    <option value="">1.1 L</option>
    <option value="">1.5 L</option>
    <option value="" class="product-other-switch">Other</option>
</select>

<div class="product-other-div" style="display: none;">
    <label for="product-other">Specify:</label>
    <input type="text" id="product-other" />
</div>

这是JavaScript

$(document).ready(function() {
    $('.product-other-switch').click(function() {
        $('.product-other-div').slideDown('fast');
    });

    $('.product-other-switch').blur(function() {
       alert('Handler for .blur() called.'); 
    });
});

当然，您可以尝试 jsfiddle 演示 - http://jsfiddle.net/t9fmA/1/

Answer 1

尝试以下操作：
给option其他人一个价值（像这样）

<select id="product">
    <option value="">375 ml</option>
    <option value="">500 ml</option>
    <option value="">750 ml</option>
    <option value="">1 L</option>
    <option value="">1.1 L</option>
    <option value="">1.5 L</option>
    <option value="other" class="product-other-switch">Other</option>
</select>

Javascript：

$("select#product").click(function(){
if($(this).val() == "other")
{
// fade in your text box ;
}
else
{
// fade out your text box ;
}
});

Answer 2

通常对于这样的事情，我会使用更改事件并比较值，但是，您可以使用以下选择器来单击另一个以使用您的代码：

$("#product option:not(.product-other-switch)").click(function() {
    $(".product-other-div").slideUp("fast");
});

Answer 3

你为什么不尝试价值观

在这里演示

HTML

<select id="product">
    <option value="1">375 ml</option>
    <option value="2">500 ml</option>
    <option value="3">750 ml</option>
    <option value="4">1 L</option>
    <option value="5">1.1 L</option>
    <option value="6">1.5 L</option>
    <option value="" class="product-other-switch">Other</option>
</select>

jQuery

$(document).ready(function() {
    $('#product').change(function() {
        dropdown = $('#product').val();
        if (dropdown === '')
            $('.product-other-div').slideDown('fast'); 
        else
            $('.product-other-div').slideUp('fast');

    });
});