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>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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments