Question

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

我得到这样的值：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>

Answer 1

首先，您必须获取input.age的值，然后将其拆分。之后，您可以使用该值在selected

中设置loop属性

＆＃13;

$(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>');
    }
  });
}

＆＃13;

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

＆＃13;

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

1 个答案: