javascript - 根据输入值选择选项

Question

我有简单的预订表格。在这种形式中，我有两个输入框，我根据隐藏在类名“房间”中的输入值更改每个房间的数量，此外还有另一个输入显示这样的数字: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>