根据所选数字指定数字范围 [英] Specify range of numbers based on the selected number

问题描述

当用户选择号码1000243时，我想要另一个选项来从该输入的数字中选择200个数字。那就是：

When the user select a number 1000243, I want another option to range 200 numbers from that inputed number. SO it would be:

   //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的数字，因此另一个选项范围是200个数字从4500124开始到4500323：

OR, the user select a number of 4500123, so another option would range 200 numbers start from 4500124 to 4500323:

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

有一件事是用户选择的手动号码在选择的下拉选项中。

One thing is that the manual number user choose is in a dropdown option on select.

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

How to do this? Thanks in advance.

推荐答案

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

If you can use jQuery then you can use change event handler to update the second select

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

演示：小提琴

没有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();

演示：小提琴

这篇关于根据所选数字指定数字范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！