根据附加选择框中输入框的值选择选项框(Select option box based on value of an input box in appended selectbox)
我有一个显示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>
更多推荐
发布评论