根据select

Question

我正在尝试绘制一个特定数量的输入，这个数字取决于select输入的值，这里的问题是所选的选项是由另一个数字输入的值决定的，换句话说，如果我输入{ {1}}在我的数字输入上，我的选择输入的所选选项应为3，因此我的函数应绘制3输入。也许我不太清楚，但这是我的代码和我尝试的内容：

3

$(document).ready(function() {
  $('#Controls').on('blur', '#InputNumbers', function() {
    selectValue();
  });
});

function selectValue() {
  var inputVal = $('#InputNumbers').val();

  $('#MyInputs').val(inputVal);
  $('#MyInputs').change(function() {
    draw();
  });
}

function draw() {
  alert("Hi");
  var total = $('#MyInputs').val();
  var html = "";
  for (var i = 0; i < total; i++) {
    html += '<input />';
  }

  $('#draw').html(html);

}

正如您所看到的，前两个步骤正常，问题是当我尝试这样做时：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="Controls">
  <input type="number" placeholder="Number of inputs" id="InputNumbers" />

  <select id="MyInputs" disabled>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

  <div id="draw">
  </div>

</div>

该功能未执行，我该如何解决？

Answer 1

您需要将更改事件绑定到输入，禁用您的选择：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#Controls').on('blur', '#InputNumbers', function() {
    selectValue();
  });
});

function selectValue() {
  var inputVal = $('#InputNumbers').val();

  $('#MyInputs').val(inputVal);

}
$('#InputNumbers').change(function() {

  draw();
});

function draw() {
  $('#draw').empty();
  var total = parseInt($('#InputNumbers').val());
  for (var i = 0; i < total; i++) {
    $('#draw').append('<input />');
  }



}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="Controls">
  <input type="number" placeholder="Number of inputs" id="InputNumbers" />

  <select id="MyInputs" disabled>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <div id="draw">
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请参考以下代码，其工作原理，您不需要更改活动

$(document).ready(function() {
  $('#Controls').on('blur', '#InputNumbers', function() {
    selectValue();
  });
});

function selectValue() {
 
  var inputVal = $('#InputNumbers').val();

  $('#MyInputs').val(inputVal);
 
    draw();
  
}

function draw() {
  alert("Hi");
  var total = $('#MyInputs').val();
  alert(total)
  var html = "";
  for (var i = 0; i < total; i++) {
    html += '<input />';
  }

  $('#draw').html(html);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="Controls">
  <input type="number" placeholder="Number of inputs" id="InputNumbers" />

  <select id="MyInputs" disabled>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

  <div id="draw">
  </div>

</div>