javascript - 根据所选数字指定数字范围

Question

当用户选择一个数字 1000243 时，我想要另一个选项从输入的数字中选择 200 个数字。所以它会是:

   //User Input Number Here
   <select id="manual"> 
       <option value="1000243">1000243</option>

   //Automatically Generate 200 Number Range
   <select id="automatic"> 
      <option value="1000243">1000244</option> 
               ...INTO...
      <option value="1000243">1000443</option>

或者，用户选择一个数字 4500123，因此另一个选项是从 4500124 到 4500323 范围内的 200 个数字:

   //User Input Number Here
   <select id="manual"> 
       <option value="4500123">4500123</option>

   //Automatically Generate 200 Number Range
   <select id="automatic"> 
       <option value="4500124">4500124</option>
               ...INTO...
      <option value="4500324">4500324</option>

一件事是，用户选择的手动编号位于选择的下拉选项中。

如何做到这一点？提前致谢。

Answer 1

如果您可以使用 jQuery，那么您可以使用更改事件处理程序来更新第二个选择

var $auto = $('#automatic')
$('#manual').on('change', function () {
    var value = +$(this).val();
    $auto.empty();
    for (var i = 0; i < 200; i++) {
        $('<option>', {
            text: i + value
        }).appendTo($auto);
    }
}).change()

演示:Fiddle

---

没有 jQuery

var auto = document.getElementById('automatic');
var manual = document.getElementById('manual');
manual.addEventListener('change', updateAutomatic, false);

function updateAutomatic() {
    while (auto.firstChild) {
        auto.removeChild(auto.firstChild);
    }
    var value = +manual.value;
    for (var i = 0; i < 200; i++) {
        var opt = document.createElement('option');
        opt.value = i + value;
        opt.innerHTML = i + value;
        auto.appendChild(opt);
    }
}
updateAutomatic();

演示:Fiddle