我有一个带有几个下拉框的表单。
如果用户从下拉菜单中选择“其他”,则另一个带有输入字段的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");
}
});
答案 0 :(得分: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
答案 1 :(得分:1)
演示: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");
}
});
});
答案 2 :(得分:0)
仅为了好玩的演示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");
}
});
});
答案 3 :(得分:0)
使用班级
$(".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");
}
});