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

Question

我有一个显示子项数量的选择框。当用户更改选择框时，它会附加选择框以显示每个孩子的年龄。此外，我有一个类型为 readonly 的输入框。 如何根据类名 age 的输入类型的值来选择每个孩子的年龄？

我得到这样的值：1,2

第一个值用于第一个选择框，第二个值用于第二个选择框。 如果用户从第一个更改选择框，我想清除所选选项。

有没有办法做到这一点？ 这是我的 sn-p：

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

首先你必须得到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>