我有一个简单的预订表格。在这种形式，我有两个输入框，我根据隐藏的类名和＃34;房间＆＃34;更改每个房间的数量，此外还有另一个输入显示
这样的数字：1,8 * 1,11
第一个数字显示人数，第二个数字显示逗号显示第一个房间中该人的年龄。
我把第一个和第二个房间分开，它们之间有一颗星星。星号后的数字也表示第二个房间中每个人的数量和年龄。
我的问题是如何使用这些数字来选择我的选择框？
例如，我想使用选择框子项的第一个数字。如果那个数字是1.我会在第一个房间为我的孩子选择1。也是我第一个房间等第一个孩子年龄的第二个数字。
我使用函数fillchild编写了以下代码，但它不起作用。
这是我的片段：
$(document).ready(function() {
$('#rooms').val($('.rooms').val());
$('#rooms').change()
})
$("#rooms").change(function() {
countRoom = $(this).val();
$(".numberTravelers").empty()
for (i = 1; i <= countRoom; i++) {
$(".numberTravelers").css("width", "100%").append('<div class="countRoom"><div class="numberOfRooms">room' + i + '</div><div class="col-xs-4">child<select name="childcount" class="childcount" onchange="childAge(this)"><option value="0"> 0 </option><option value="1"> 1 </option> <option value="2"> 2 </option></select></div><div class="selectAge col-xs-4"></div><input type="hidden" name="_root.rooms__' + i + '.childcountandage" class="childcountandage"/></div>')
}
});
function childAge(a) {
$(a).each(function() {
age = $(a).val();
$(a).closest(".countRoom").find(".selectAge").empty();
for (var j = 1; j <= age; j++) {
$(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('<div class="age"><label>child age' + j + '</label><select name="childage" class="childage form-control"><option value="1">till 1 year</option><option value="2">1-2 year</option><option value="3">2-3 year</option><option value="4">3-4 year</option></select></div>');
}
fillchild();
});
}
function fillchild() {
var childCounts = $('.childage').val().split(',');
var ageCounts = $('.childage').val().split('*');
childCounts.forEach((childage, index) => {
var selectname = '_root.rooms__' + (index + 1) + '.childcountandage';
var selectElement = $('input[name="' + selectname + '"]');
if (selectElement.length > 0) {
$(selectElement).val(childage);
}
})
}.numberOfRooms {
border: 1px solid red;
}
.childage {
background: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="researchii">
<input type="hidden" class="rooms" value="2" />
<input type="text" class="childage" value="1 ,8*1 ,11" readonly />
<div class="col-xs-4">
<span class="itemlable">rooms: </span>
<select name="rooms" id="rooms">
<option value="1" class="btn2"> 1 </option>
<option value="2" class="btn2"> 2 </option>
</select>
</div>
<div class="numberTravelers">
<div class="countRoom">
<div class="col-xs-4">
<span class="itemlable">child</span>
<select name="childcount" class="childcount" onChange="childAge(this)">
<option value="0"> 0 </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</div>
<div class="selectAge col-xs-4"></div>
<input type="hidden" name="_root.rooms__1.childcountandage" class="childcountandage" />
</div>
</div>
</div>
答案 0 :(得分：2)
我已经让它变得动态，所以它仍适用于3岁和4岁的2个孩子。你可以在下面看到这个例子。
$(document).ready(function() {
$('#rooms').val($('.rooms').val());
$('#rooms').change()
})
$("#rooms").change(function() {
countRoom = $(this).val();
$(".numberTravelers").empty()
for (i = 1; i <= countRoom; i++) {
$(".numberTravelers").css("width", "100%").append('<div class="countRoom"><div class="numberOfRooms">room' + i + '</div><div class="col-xs-4">child<select name="childcount" class="childcount" onchange="childAge(this)"><option value="0"> 0 </option><option value="1"> 1 </option> <option value="2"> 2 </option></select></div><div class="selectAge col-xs-4"></div><input type="hidden" name="_root.rooms__' + i + '.childcountandage" class="childcountandage"/></div>')
}
fillchild();
});
var ageGlobal ='';
function childAge(a) {
$(a).each(function() {
age = $(a).val();
ageGlobal = ageGlobal.split(',');
$(a).closest(".countRoom").find(".selectAge").empty();
for (var j = 1; j <= age; j++) {
$(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('<div class="age"><label>child age' + j + '</label><select name="childage" class="childage form-control"><option value="1">till 1 year</option><option value="2">1-2 year</option><option value="3">2-3 year</option><option value="4">3-4 year</option></select></div>');
var ageVal = ageGlobal[j-1] || "1";
//set the value of age dropdown
$(a).closest(".countRoom")
.find("select[name='childage']:eq("+(j-1)+")")
.val(ageVal);
}
});
//reset ageGlobal so that it works when child is changed
ageGlobal = "1";
}
function fillchild() {
var roomChildAge = $('.childage').val().split('*');
roomChildAge.forEach((childAge, index) => {
//find the child dropdown for the room
var childElement = $($('.countRoom')[index]).find('.childcount');
//element for child exist
if (childElement.length > 0) {
//get the child and age values using substring
var childCount;
//when there is no child and its age
if(childAge.trim()==="0"){
childCount = "0";
ageGlobal ='';
}else{
childCount = childAge.substring(0, childAge.indexOf(','));
ageGlobal = childAge.substring(childAge.indexOf(',')+1, childAge.length);
}
$(childElement).val(childCount.trim());
//trigger change eveny so that age select box is pre-selected
$(childElement).trigger('change');
}
})
}.numberOfRooms {
border: 1px solid red;
}
.childage {
background: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="researchii">
<input type="hidden" class="rooms" value="2" />
<input type="text" class="childage" value="2 ,3,4*0" readonly />
<div class="col-xs-4">
<span class="itemlable">rooms: </span>
<select name="rooms" id="rooms">
<option value="1" class="btn2"> 1 </option>
<option value="2" class="btn2"> 2 </option>
</select>
</div>
<div class="numberTravelers">
<div class="countRoom">
<div class="col-xs-4">
<span class="itemlable">child</span>
<select name="childcount" class="childcount" onChange="childAge(this)">
<option value="0"> 0 </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</div>
<div class="selectAge col-xs-4"></div>
<input type="hidden" name="_root.rooms__1.childcountandage" class="childcountandage" />
</div>
</div>
</div>