根据附加选择框中输入框的值选择选项框

Question

I have a selectbox that shows number of childeren. when the user change selectbox it appends selectboxes for showing age of each child. moreover I have an input box with type readonly . how can I select each child age based on value of input type with classname age ?

i get values like this : 1,2

the first value is for the first selectbox and the second value is for second selectbox . and if user change select box froM the first i want to clear the selected option.

is there a way to do this ? here is my snippet :

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

First you have to get the value of input.age and then split it. After that you can use that value to set selected attribute in your loop

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