Question

您好，

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

我试过.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

为什么不尝试使用值

Demo Here

<强> 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');

    });
});

jQuery - <option>标签 - 无法在</option> <option>'取消选择'或'focusout'</option>上触发回调

3 个答案: