javascript - 根据选择的值绘制 'N' 输入

Question

我正在尝试绘制特定数量的输入，这个数字取决于选择输入的值，这里的问题是所选选项由另一个数字输入的值决定，换句话说，如果我输入 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>

如您所见，前 2 个步骤工作正常，问题是当我尝试这样做时:

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

函数没有执行，如何解决？

Answer 1

请引用下面的代码，它是如何工作的，你不需要更改事件

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