Specify a range of numbers based on the selected number
When the user selects the number 1000243, I want the other option to have a range of 200 numbers from the number entered. So this 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>
OR, the user selects the number 4500123, so another option would include 200 numbers ranging 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>
It's one thing that the custom hand number is in the dropdown when selected.
How to do it? Thank you in advance.
source to share
If you can use jQuery you can use the change event handler to update the second selection
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()
Demo: Fiddle
No 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();
Demo: Fiddle
source to share
Your question is a bit unclear, so I created a function that you can use:
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");
I ran this with the results here
Fiddle
If #automatic
already defined
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
How it works
So, in the first part, we create an empty string that will contain everything new options
. Then we will loop through all the numbers from the start number to the start number plus 200. When we loop, we add the number to the option. When we're done, we'll add options
inselect
My answer has shrunk
This is a bit more unreadable but more compact code:
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}
source to share
You can do something like below.
$('#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)
})
source to share
Try
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);
});
<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>
source to share
http://jsfiddle.net/szhxff0w/1/
This is probably what you are looking for.
Use a for loop to fill in the combo using the blur () event.
edit: onclick probably works better, but you get the idea ...
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>");
}
source to share