根據輸入中的所有值選擇選項

Question

我有一個簡單的預訂表格。 在這種形式中，我有兩個輸入框，我根據類名“ rooms”隱藏的輸入值來更改每個房間的數量，此外還有另一個輸入顯示

像這樣的數字：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> 

Answer 1

我將其設為動態，以便它仍然適用於2個3歲和4歲的孩子。您可以在下面看到該示例。

 $(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>