Select 基于附加选择框中输入框值的选项框

Question

我有一个 select 框，显示 childeren 的数量。当用户更改 selectbox 时，它会附加 selectbox 以显示每个 child 的年龄。此外，我有一个类型为 readonly 的输入框。我如何 select 每个 child 年龄基于具有类名年龄的输入类型的值？

i get values like this : 1,2

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

有办法吗？这是我的片段：

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

Select 基于附加选择框中输入框值的选项框

Select option box based on value of an input box in appended selectbox

javascript

jquery

onchange