根據輸入值選擇選項

Question

我有簡單的預訂表格。 在這種形式下，我有兩個輸入框，並根據隱藏在類名“ rooms”中的輸入值更改每個房間的編號，此外，還有另一個輸入顯示如下數字：1,3,1第一個數字顯示成人人數在第一個房間中，第二個數字顯示成年人在第二個房間中計數，依此類推。

我想根據此輸入框中類別為“ adultcount”的數字為每個房間的成年人選擇選項。

如何在選擇框中定義此內容？

這是我的片段

 $(document).ready(function(){ $('#roomcount').val($('.rooms').val()); $('#roomcount').change() }) $("#roomcount").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">adults<select name="_root.rooms__' + i + '.adultcount"><option value="1">1</option><option value="2">2</option></select></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>') } }); 

 .numberOfRooms { border:1px solid red; } 

 <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="hidden" class="adultcount" value="2,1"/> <div class="col-xs-4"> <span class="itemlable">roomcount: </span> <select name="rooms" id="roomcount"> <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">adults: </span> <select name="_root.rooms__1.adultcount"> <option value="1"> 1 </option> <option value="2"> 2 </option> </select> </div> <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

您可以使用此代碼。 簡單且可重復使用的函數fillAdultsCount ，您可以調用該函數並實現所需的功能。

 $(document).ready(function(){ $('#roomcount').val($('.rooms').val()); $('#roomcount').change() }) $("#roomcount").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">adults<select name="_root.rooms__' + i + '.adultcount"><option value="1">1</option><option value="2">2</option></select></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>') } fillAdultsCount(); }); function fillAdultsCount(){ //get the array of adult count var adultCounts = $('.adultcount').val().split(','); adultCounts.forEach((adultCount, index)=>{ var selectName = '_root.rooms__'+(index+1)+'.adultcount'; var selectElement = $('select[name="'+selectName+'"]'); //element exist if(selectElement.length > 0){ $(selectElement).val(adultCount); } }) } 

 .numberOfRooms{ border:1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="researchii"> <input type="hidden" class="rooms" value="2"/> <input type="hidden" class="adultcount" value="2,1"/> <div class="col-xs-4"> <span class="itemlable">roomcount: </span> <select name="rooms" id="roomcount"> <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">adults: </span> <select name="_root.rooms__1.adultcount"> <option value="1"> 1 </option> <option value="2"> 2 </option> </select> </div> <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>