组合多个简单的jQuery函数

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");
    }
});

- Dejavu

---

尝试我的代码并告诉我... - Luca Filosofi

Answer 1

使用类而不是id，并将它们分类，如下所示：

使用类而不是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

- Tariq

---

那个选项是向上滑动的，而不是盒子。 - Maximillian Laumeister

谢谢，但是box不是.option的子元素。 - Dejavu

盒子不必是一个子元素。只需调用盒子的ID即可隐藏它。我使用了选项ID，因此我获得了选项和盒子中使用的ID号码。 - Tariq

请问您能否更新一下您的第一段代码？我无法通过您的代码弄清如何使盒子向下滑动。 - Dejavu

正如我之前所说，你的代码是将选项滑动/隐藏，而不是盒子。 - Dejavu

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");
        }
    });
});

- user4120314

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");
        }
    });
});

- Luca Filosofi

---

相当复杂 :) - Dejavu

复杂吗？有了这几行代码，您就不必重写所有的HTML代码了。（因为您需要重写HTML代码，您知道这一点吗？） - Luca Filosofi

你说得对。我正在尝试将下拉菜单和框放入容器中，以寻找另一种方法。刚刚更新了我的代码。 - Dejavu

@Dejavu：那我的代码怎么样了..它能工作吗？如果你需要更多帮助，就让我知道。 - Luca Filosofi

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");
  }
});

- isnvi23h4

---

如果我选择一个选项而不是“其他”，它会滑动下拉菜单。 - Dejavu

@Dejavu，你需要获取var parent = $($(this).parent()).parent();来处理你的HTML结构（因为容器父元素是选择器的父元素的父元素），同时$(".box").slideUp();也需要在顶部提及。 http://jsfiddle.net/#&togetherjs=66wOuC1roU - isnvi23h4