Question

当我从下拉列表中选择“其他”时，我正在尝试显示文本字段。它工作正常，但只在第一个实例。我需要它每页多次工作。我试过.each（）,. foreach（）但似乎找不到合适的位置。如何让它在多个下拉列表中运行

JS：

    $(window).load(function(){
    $('#myselect').change(function() {
        if($(this).val() == 2)
            $('#txtData').show();
        else
            $('#txtData').hide();
    });
    }

)

HTML：

<select id="myselect">



    <option value="" selected="selected">-Select One-</option>

    <option value="No">No</option>
     <option value="2">Yes</option>

</select>
<br />
<input type="text" id="txtData" placeholder="Please Specify..." class="other" style="display:none;"  />

Answer 1

我不确定你要做什么，但看看是否这样帮助你：

jsfiddle Demo change()

我实际上已将您的代码更改为使用class而非ID's，并为每个选择框创建了多个输入文本。

否则请尝试更具体。

<强>代码：

$('.other').hide();

$('.sectos').change(function() {
    if($(this).val() == 3){
       $(this).next('input').fadeIn(); 
    }
    else{
       $(this).next('input').fadeOut();        
    }
});

Answer 2

这是我的第一个答案！

这样做的一种方法是为每个“组”输入设置一个单独的函数，但我认为你不想这样做......

我将其中两个选择/输入配对包装到字段集中，如下所示：

<fieldset>
    <select id="myselect">
        <option value="" selected="selected">-Select One-</option>
        <option value="No">No</option>
        <option value="2">Yes</option>
    </select>
    <br />
    <input type="text" id="txtData" placeholder="Please Specify..." class="other" style="display:none;"  />
</fieldset>
<fieldset>
    <select id="myselect2">
        <option value="" selected="selected">-Select One-</option>
        <option value="No">No</option>
        <option value="2">Yes</option>
    </select>
    <br />
    <input type="text" id="txtData2" placeholder="Please Specify..." class="other" style="display:none;"  />
</fieldset>

JS：

$(document).ready(function(){
    $("fieldset").each(function(){
        $(this).change(function(){
            if($(this).children("select").val() == 2){
                $(this).children("input").show();
            }
            else {
                $(this).children("input").hide();
            }
        });
    });
});

这样，您现在为每组输入都有一个父元素。您可以使用div或其他任何您想要使用的效果来实现类似的效果。

希望这有帮助！

隐藏文本字段的多个下拉列表

2 个答案: