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

Question

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

pathFor

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

params

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

怎么做？提前致谢。

Answer 1

您的问题有点不清楚所以我已经制作了一个可以使用的功能：

function genOptions (n, elem) {
    var new_select = $('<select id="automatic"></select>');

    n = +n;//Makes n an interger

    for (var i = n+1; i < n+200+1; i += 1) {
        new_select.append('<option value="'+i+'">'+i+'</option>');
    }
    $(elem).append(new_select);
    return new_select;
}

genOptions(100, "body");

我用结果here

运行了这个

Fiddle

如果已定义#automatic

function genOptions (n) {
    var new_data = '';//Blank string

    n = +n;//Makes n an interger

    for (var i = n+1; i < n+200+1; i += 1) {//Loop from n to n+200, we must add 1 because JavaScript counting starts at 0
        new_data += '<option value="'+i+'">'+i+'</option>';//Add the new option to the group of options
    }

    $('#automatic').html(new_data);//Add the group of options to the select

    return new_select;//This is not really needed, you can ignore this, really
}

$('#get_run').click(function () {//When the button is clicked,...
    genOptions($('#get_start').val());//Run the function, and pass the value of the input
});

Fiddle

如何运作

所以第一部分是我们创建一个空字符串，其中全新的options将会出现。接下来，我们将通过起始编号中的所有数字循环到起始编号加上200.当我们循环时，我们将数字添加到选项中。完成后，我们会将options添加到select

我的答案缩短了

这有点难以理解，但代码更紧凑：

function genOptions(t){var n="";t=+t;for(var o=t+1;t+200+1>o;o+=1)n+='<option value="'+o+'">'+o+"</option>";return $("#automatic").html(n),new_select}

Answer 2

如果您可以使用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

Answer 3

你可以做类似下面的事情

$('#manual').change(function(){
    var val = +($(this).val());
    var automaticOptionsHtml = '';
    for(var i=1;i<=200;i++){
        var value = val + i;
        automaticOptionsHtml += '<option value="'+value+'">'+value+'</option>';
    }
    $('#automatic').html(automaticOptionsHtml)
})

DEMO

Answer 4

尝试

＆＃13;

＆＃13;

var manual = $("#manual");
var automatic = $("#automatic");
manual.on("change", automatic, function(e) {
  var value = Number(e.target.value) + 200;
  $(e.data).val(value).find("option").html(value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="manual">
  <option>select</option>
  <option value="1000243">1000243</option>
  <option value="1000344">1000344</option>
  <option value="1000445">1000445</option>
  <option value="1000546">1000546</option>
  <option value="1000647">1000647</option>
  <option value="4500123">4500123</option>
</select>
<!-- //Automatically Generate 200 Number Range -->
<select id="automatic">
  <option value="">0</option>
  <!--          ...INTO...
      <option value="1000243">1000443</option>
-->
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 5

http://jsfiddle.net/szhxff0w/1/

这可能是您正在寻找的。

使用for循环使用blur（）事件填充组合。

编辑：onclick可能效果更好，但你明白了......

<强> HTML

<input id="init" value = "224000" >   </input>

<select id="models">

    <option value = "224000">224000</option>    

</select> 

<强> JS

$(window).load = function () {

 populate();   

}

$('#init').blur(function () { 

    populate ();

})

 function populate () {
   var n = $('#init').val();
    $('#models').empty();


    for (var i = 0; i <= 200; i++) {

        var x = parseInt(n) + i;

    $('#models').append("<option value='" + x + "'>" + x + "</option>");




}