CODEWITHSUNDEEP
javascriptjquery
inaz
inaz

Reputation: 1785

Select option based on values of an input

I have simple reservation form . in this form I have two input box and I change number of each room based on value of input hidden with class name "rooms", moreover there is another input that shows numbers like this: 1,3,1 the first number shows adults count in first room, second number shows adults count second room and etc.

I want to select options for adults in each room based on numbers in this input box with the class name "adultcount".

how can I define this in my select box?

here is my snippet 

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

Upvotes: 1

Views: 65

Answers (1)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can use this code. Easy and reusable function fillAdultsCount, which you can call and achieve what you need.

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

Upvotes: 2

Related Questions