Question

我有一个带有几个下拉框的表单。

如果用户从下拉菜单中选择“其他”，则另一个带有输入字段的div将向下滑动。

问题是我有20多个这样的下拉框。我可以只创建一个函数来触发相关函数吗？

这是我的HTML：

<div class="container">
    <div>
        <select id="option1" name="city">
            <option value="">Please Choose</option>
            <option value="Other">Other</option>
            <option value="London">London</option>
        </select>
    </div>

    <div id="box1">
        <input type="text" name="city-other">
    </div>
</div>

<div class="container">
    <div>
        <select id="option2" name="color">
            <option value="">Please Choose</option>
            <option value="Other">Other</option>
            <option value="Red">Red</option>
        </select>
    </div>

    <div id="box2">
        <input type="text" name="color-other">
    </div>
</div>

我的jQuery代码：

$("#box1").hide();
$('#option1').on('change', function() {
    if ( this.value == 'Other')
    {
        $("#box1").slideDown("slow");
    } else {
        $("#box1").slideUp("slow");
    }
});

$("#box2").hide();
$('#option2').on('change', function() {
    if ( this.value == 'Other')
    {
        $("#box2").slideDown("slow");
    } else {
        $("#box2").slideUp("slow");
    }
});

Answer 1

使用类而不是id并将它们分类为：

$('.option').on('change', function() {
    if ( this.value == 'Other')
    {
        $(this).slideDown("slow");
    } else {
        $(this).slideUp("slow");
    }
});

编辑：
要隐藏该框，您应该通过以下方式获取选择输入的ID（在更改函数内）：

var this_id = $(this)[0].id;
this_id = this_id.split('option')[1]; //get the input id
$("#box" + this_id).hide(); //hide box with same id

Answer 2

演示：http://jsfiddle.net/fn5ac1f7/

$(function () {
    $(".box").hide();
    $('.option').on('change', function() {
        var parent = $(this).parent().parent();
        var children=$(parent).children()[1];

        if ( this.value == 'Other')
        {
            $(children).slideDown("slow");
        } else {
            $(children).slideUp("slow");
        }
    });
});

Answer 3

仅为了好玩的演示https://jsfiddle.net/mtffje50/

$(function () {
    // hide all div with id starting with "box"
    $("div[id^='box']").hide(); 
    // observe all select with id starting with "option"
    $("select[id^='option']").on('change', function () {
        // do the trick here...
        var name = this.name.toLowerCase() + '-other';
        var $parent = $("input[name='" + name + "']").parent().parent();
        if (this.value.toLowerCase() == 'other') {
            $parent.slideDown("slow");
        } else {
            $parent.slideUp("slow");
        }
    });
});

Answer 4

使用班级

$(".box").slideUp();
$('.option').on('change', function() {
var parent = $($(this).parent()).parent();
var children=$(parent).children()[1];

  if ( this.value == 'Other') {
    $(children).slideDown("slow");
  } else {
    $(children).slideUp("slow");
  }
});

结合多个简单的jQuery函数

4 个答案: