根据输入框中的数字选择选择框选项

Question

我写了下面的函数来添加新的 selectbox onchange 我的 selectbox。

这部分代码对我来说效果很好。

我的问题是如何 select 我的主 select 框的选项基于带有类名 childcount 的输入框的值？

我的意思是如果它是 2 选择一个值为 2 的选项？有办法吗？这是我的片段：

$(function() {
  $(".button-click-child a").on("click", function() {
    var button = $(this);
    var oldVal = parseInt(button.closest("ul").prev().val());
    var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
    button.closest("ul").prev().val(newVal);
    button.closest("ul").next().val(newVal+',');
    $(".cat_textbox").each(function() {
      var cat = $(this).prev('span').text();
      total_value += cat + ": " + $(this).val() + "، ";
    });

    if (oldVal < newVal) {
      $('.childDropdowns').append(createChildDropdown(newVal));
    } else if (oldVal > newVal) {
      destroyChildDropdown($('.childDropdowns'), newVal);
    }
  
  })
})
 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.11.0/jquery.min.js"></script>
<div class="countRoom">
     children
     <select onChange="childAge(this)">
      <option value="0"> 0 </option>
      <option value="1"> 1 </option>
      <option value="2"> 2 </option>
     </select>
   <input type="text" class="childcount" value="2" readonly>
     
    <div class="selectAge"></div>
   </div>

Answer 1

试试这个 select 一个选项：

$('select option[value="'+$('.childcount').val()+'"]').attr('selected','selected');

Answer 2

您可以添加$(document).ready块，并将select的值设置为input的值。请注意，您必须在之后执行 change() 效果，这样您的代码才能正常工作。

$(document).ready(function(){
  $('.countRoom').find('select').val($('.childcount').val());
  $('.countRoom').find('select').change()
})
$(function() {
  $(".button-click-child a").on("click", function() {
    var button = $(this);
    var oldVal = parseInt(button.closest("ul").prev().val());
    var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
    button.closest("ul").prev().val(newVal);
    button.closest("ul").next().val(newVal+',');
    $(".cat_textbox").each(function() {
      var cat = $(this).prev('span').text();
      total_value += cat + ": " + $(this).val() + "، ";
    });

    if (oldVal < newVal) {
      $('.childDropdowns').append(createChildDropdown(newVal));
    } else if (oldVal > newVal) {
      destroyChildDropdown($('.childDropdowns'), newVal);
    }
  
  })
})
 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.11.0/jquery.min.js"></script>
<div class="countRoom">
     children
     <select onChange="childAge(this)">
      <option value="0"> 0 </option>
      <option value="1"> 1 </option>
      <option value="2"> 2 </option>
     </select>
   <input type="text" class="childcount" value="2" readonly>
     
    <div class="selectAge"></div>
   </div>

根据输入框中的数字选择选择框选项

Choose selectbox option based on a number in an inputbox

javascript

jquery

onchange