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

Question

我编写了下面的函数来在我的selectbox的更改中添加新的selectbox。

这部分代码对我很有用。

我的问题是如何根据带有classname childcount的inputbox值选择我的主选择框的选项？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以添加$(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>

Answer 2

尝试此选择选项：

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