根據附加選擇框中輸入框的值選擇選項框

Question

我有一個選擇框，用於顯示childeren的數量。 當用戶更改選擇框時，它將附加選擇框以顯示每個孩子的年齡。 此外，我有一個類型為readonly的輸入框。 如何根據具有類別名稱age的輸入類型的值選擇每個孩子的年齡？

我得到像這樣的值：1,2

第一個值用於第一個選擇框，第二個值用於第二個選擇框。 如果用戶從第一個更改選擇框，則我想清除選擇的選項。

有沒有辦法做到這一點 ？ 這是我的片段：

 $(document).ready(function(){ $('.countRoom').find('.childnum').val($('.childcount').val()); $('.countRoom').find('.childnum').change() }) 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>Age of Child' + j + '</label><select name="childage" class="childage form-control"><option value="1">Up to 1 years</option><option value="2">1 to 2 years</option></select></div>'); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="countRoom"> children <select onChange="childAge(this)" class="childnum"> <option value="0"> 0 </option> <option value="1"> 1 </option> <option value="2"> 2 </option> </select> <input type="text" class="childcount" value="2" readonly style="display:none;"> <input type="text" class="age" value="1,2" readonly style="background:green;"> <div class="selectAge"></div> </div> 

Answer 1

首先，您必須獲取input.age的值，然后將其拆分。 之后，您可以使用該值在loop設置selected屬性

 $(document).ready(function() { $('.countRoom').find('.childnum').val($('.childcount').val()); $('.countRoom').find('.childnum').change() }) function childAge(a) { var ageVals = $('input.age').val().split(',') $('input.age').val(',') $(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>Age of Child' + j + '</label><select name="childage" class="childage form-control"><option value="1" ' + (ageVals[j - 1] == 1 ? 'selected' : '') + '>Up to 1 years</option><option value="2" ' + (ageVals[j - 1] == 2 ? 'selected' : '') + '>1 to 2 years</option></select></div>'); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="countRoom"> children <select onChange="childAge(this)" class="childnum"> <option value="0"> 0 </option> <option value="1"> 1 </option> <option value="2"> 2 </option> </select> <input type="text" class="childcount" value="2" readonly style="display:none;"> <input type="text" class="age" value="1,2" readonly style="background:green;"> <div class="selectAge"></div> </div>