Javascript jQuery-<；选项>；标记-无法在<；选项>'；取消选择'；或'；聚焦输出'；

-演示

嗨

我有一个

+

列表，如果用户选择其他，下面会出现一个输入框。这部分工作正常，因为我使用了

上的

.click（）

函数。但是，我希望一旦我们选择了除其他之外的内容，输入框就会消失

我尝试了

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

当然，您可以尝试JSFIDLE演示-

尝试以下操作：
为

选项

其他指定一个值（如下所示）

---

通常，对于类似的情况，我会使用change事件并比较值，但是，您可以使用以下选择器来单击其他选择器来处理代码：

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

---

你为什么不试试价值观呢

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>

---

尝试将

onchange

侦听器附加到

#产品

。如果所选索引不是最后一个索引，请隐藏div。您也可以使用同一个处理程序来显示div，因为单个

选项上的单击检测不是跨浏览器的。@all-谢谢大家，所有答案都有效。我之所以选择tymeJV，是因为它是我最感兴趣的。好的，经过测试，这是一个在Chrome/Safari中也适用的选项。
$("select#product").click(function(){
if($(this).val() == "other")
{
// fade in your text box ;
}
else
{
// fade out your text box ;
}
});

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

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

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

    });
});