我有一个项目,在一个表单字段中合并两个变量。
此唯一字段将包含每间客房/每间客房的价值,每间客房将以“|”分隔。
所以每个房间有3个房间和2个人= 2 | 2 | 2
或2间客房,第1间客房2人,第2间客房3人= 2 | 3
我已准备好两个jQuery函数:
我遇到的问题是每个函数都独立工作,当用户更新一个时,单个表单字段不会更新。
如何合并或更新两个作为一个函数的函数?
我已经发布了一个工作示例@
这是HTML代码
Number of rooms<br />
<select id="itemCount" name="itemCount">
<option selected value="1">1 item</option>
<option value="2">2 items</option>
<option value="3">3 items</option>
<option value="4">4 items</option>
</select><br /><br />
Number of persons<br />
<select name="cloneElement1" id="item_dup_1" class="room">
<option value="">Select One</option>
<option value="1">1</option>
<option selected value="2">2</option>
<option value="3">3</option>
</select><br /><br />
<input type="text" name="myNumbers" value="2">
这里是jQuery
// fn Clone Boxes
jQuery.fn.fieldsManage = function (number) {
var ele = $(this);
var clones = ele.data("clones");
clones = clones ? clones : new Array(ele.attr("id"));
if (clones.length < number) {
var clone;
while(clones.length < number) {
clone = ele.clone(true);
var id = clones[0]+clones.length;
clone.attr("id", id);
$("#"+clones[clones.length-1]).after(clone);
clones.push(id);
}
} else {
while(clones.length > number) {
$("#"+clones.pop()).remove();
$(function(){
$("[name='myNumbers']").val(myNumbers.join('|'));
});
}
}
ele.data("clones", clones);
}
// Create Clone Boxes
$(document).ready(function() {
$("#itemCount").change(function() {
$("#item_dup_1").fieldsManage(this.value);
});
});
// Values from Cloned Boxes
$(function(){
$('.room').change(function(e){
var myNumbers = [];
$('.room').each(function(){
myNumbers.push($(this).val());
})
$("[name='myNumbers']").val(myNumbers.join('|'));
});
});
答案 0 :(得分:0)
当您选择不同数量的房间时,您的问题是该值不会刷新吗?如果是这样,请查看此http://jsfiddle.net/gSkpq/
注意,您可以使用jQuery's live将事件绑定到可能动态添加和删除的元素