How do I use JavaScript in my <select> options list?

Question

How do I use

          <select>
          <option>numbers1-100</option>
          </select>

I have to use 1 to 100 numbers in my option list.Typing all the options takes time and makes code bigger.I guess we have to use javascript to make it work using for loop and document write.But I dont know how to put the code in the right way.How do i list the options list using java script? I mean the java script should be beside my label;example

        number : 1-1oo \\ here the options list should be printed

and number can be anywhere but the script should print options list beside the number.How do i make it ? Unable to figure it out.Been trying from an hour or so.

How old are you? Old-time typewriter users used to type zeros with "o"s as you did which makes them typographically more correct inside paragraphs... :) Funny. — Robert Koritnik
– Robert Koritnik, Commented Jul 25, 2011 at 12:43

Phil · Accepted Answer · 2011-07-25 12:55:10Z

4

Place this function in your <script> tags or include it within a script. Than call the function, createSelectOption() whenever you need the select box to be created.

Here is how you would have it loaded on page load with just javascript: `

function createSelectOption() {    
    var select_option = '<select>';
    for(i = 1; i <= 100; i++) { 
       select_option += '<option value=' + i + '>' + i + '</option>';
    }
    select_option += '</select>';
    document.getElementById('div').innerHTML = select_option;
}

I have included a jsfiddle demo to show you that it should be working/

edited Jul 25, 2011 at 12:55

answered Jul 25, 2011 at 12:42

Phil

11.2k18 gold badges73 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

niko Over a year ago

How do i call a javascript function without any condition?

Jason Gennaro Over a year ago

+1 for a good answer. But you need to modify it to include a value. So something like select_option += '<option value="' + i + '">' + i + '</option>';

niko Over a year ago

is it possible .. num : "javascriptfunction()" will that work?

niko Over a year ago

My question is not just the code but how do i make it work ? how do use it guys?

locrizak · Accepted Answer · 2011-07-25 12:43:25Z

2

You shouldn't really use javascript for this, it would usually be better using a server-side language such as php. You could use a for loop or a while loop to do this quite easily

answered Jul 25, 2011 at 12:43

locrizak

12.3k12 gold badges63 silver badges81 bronze badges

Comments

MikeM · Accepted Answer · 2011-07-25 12:52:32Z

1

Here's one way to do this.

http://jsfiddle.net/ryh7k/1/

var selectEle = document.getElementById('mySelect'),
    optionEle = undefined;

for (var i=1;i<=100;i++) {
    optionEle = document.createElement('option');
    optionEle.setAttribute('value', i.toString());
    optionEle.innerText = i.toString();
    selectEle.appendChild(optionEle);
}

answered Jul 25, 2011 at 12:52

MikeM

27.5k4 gold badges68 silver badges80 bronze badges

1 Comment

MikeM Over a year ago

jsperf on parsing the option strings vs createElement() method

margusholland · Accepted Answer · 2011-07-25 12:50:30Z

0

Simplest case:

<select>
<script>
for (var i = 1; i < 101; i++) {
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>

But there are of course problems with this. First, people without JS will not see any options and having a SCRIPT tag inside a SELECT is not that nice either.

<select id="container"></select>
<script>
var s = document.getElementById('container');
var opts = '';
for (var i = 1; i < 101; i++) {
    opts += '<option value="'+i+'">'+i+'</option>';
}
s.innerHTML = opts;
</script>

edited Jul 25, 2011 at 12:50

answered Jul 25, 2011 at 12:44

margusholland

3,3781 gold badge26 silver badges31 bronze badges

3 Comments

niko Over a year ago

but how do i call that margus ? How do i execute the script right after the number .You people giving me the code but Im unable to understand how to call it

niko Over a year ago

I have written the code i dont know where to put it and how to call it

margusholland Over a year ago

Whereever you want that selectbox to appear, just paste the second example. And if you have multiple ones one the same HTML page, just change the ID in both the select tag and in the script.

Collectives™ on Stack Overflow

How do I use JavaScript in my <select> options list?

4 Answers 4

4 Comments

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related