我有一个显示childeren数量的选择框。 当用户更改选择框时,它会附加选择框以显示每个孩子的年龄。 此外,我有一个类型只读的输入框。 我怎样才能根据类名为age的输入类型的值来选择每个孩子的年龄?
我得到这样的值:1,2
第一个值是第一个选择框,第二个值是第二个选择框。 如果用户更改了从第一个选择框,我想要清除所选的选项。
有没有办法做到这一点 ? 这里是我的片段:
$(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>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>最满意答案
首先你必须得到input.age的价值,然后分割它。 之后,您可以使用该值在loop设置selected属性
$(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>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>
更多推荐
发布评论