CODEWITHSUNDEEP
javascripthtml
user1438482
user1438482

Reputation: 389

Is it possible to use a for loop in <select> in html? and how?

I am trying to use a for loop in html but i dont even know if this is possible. Is it? and if yes how? I dont want to use php. only html and javascript.

this is my goal: i have a file containing .txt files. i want to count the number of txt files and when i get the number i want to send it to where i will use a for loop to put the txt file's numbers in a dropbox.

Thanks

Upvotes: 5

Views: 52887

Answers (7)

Andrea B
Andrea B

Reputation: 1

HTML

<select id="day" name="day"></select>    
<script type='text/javascript'>
for(var d=1;d<=31;d++)
{
var option = "<option value='" + d + "'>" + d + "</option>"
document.getElementById('day').innerHTML += option;
}
</script>

Upvotes: -1

rlemon
rlemon

Reputation: 17666

Lots of answers.... here is another approach NOT using document.write OR innerHTML OR jQuery....

HTML

<select id="foo"></select>

JS

(function() { // don't leak
    var elm = document.getElementById('foo'), // get the select
        df = document.createDocumentFragment(); // create a document fragment to hold the options while we create them
    for (var i = 1; i <= 42; i++) { // loop, i like 42.
        var option = document.createElement('option'); // create the option element
        option.value = i; // set the value property
        option.appendChild(document.createTextNode("option #" + i)); // set the textContent in a safe way.
        df.appendChild(option); // append the option to the document fragment
    }
    elm.appendChild(df); // append the document fragment to the DOM. this is the better way rather than setting innerHTML a bunch of times (or even once with a long string)
}());

And here is a Fiddle to demo it.

Upvotes: 19

rajesh
rajesh

Reputation: 1

One way is to use DynamicHTML. Let the html page have a place holder for the options of select tag.

<select id="selectBox"></select>

In a js file

var options = ["one","two","three"], selectHtml = "";

for(var optionIndex = 0; optionIndex < options.length; optionIndex++) {

    selectHtml += ("<option>" + options[optionIndex] + "</option>");

}

document.getElementById("selectBox").innerHTML = selectHtml;

Put the above code in a function and call that function onload.

Upvotes: -2

Tux9R
Tux9R

Reputation: 37

May be you can play with javascript and innerHTML. Try this

HTML

<body onload="selectFunction()">
<select id="selectId">

</select>

Javascript

function selectFunction(){  
    var x=0;   
    for(x=0;x<5;x++){
    var option = "<option value='" + x + "'>Label " + x + "</option>"
    document.getElementById('selectId').innerHTML += option;   
    } 
}

Upvotes: -1

Dolf Andringa
Dolf Andringa

Reputation: 2170

HTML is not a programming language, just a markup language, so it doesn't include things like for loops or if statements. Javascript does though. You could use javascript to generate/manipulate the HTML, and thus use for loops to create your <option> tags inside the <select>. As a startup for javascript see checkout w3schools.com

I don't like using plain javascript though, I would rather choose a javascript framework like jQuery to do this. Using jquery it is really easy to do cross-platform compatible manipulation of the HTML dom using javascript. You would only need to include some extra javascript files inside your HTML to get it working. See http://jquery.com/

An example of using jquery would be this:

<select id='myselect'></select>
<script type='text/javascript'>
var values=[[1,'tree'],[2,'flower'],[3,'car']];
for(v in values){
    var option=$('<option></option>');
    option.attr('value',values[v][0]);
    option.text(values[v][1]);
    $('#myselect').append(option);
}
</script>

You can also try this out on http://jsfiddle.net/6HUHG/3/

Upvotes: -2

Anuj
Anuj

Reputation: 306

Yes you can for example write this code in html body tag

<select>
<script language="javascript" type="text/javascript"> 

for(var d=1;d<=31;d++)
{
    document.write("<option>"+d+"</option>");
}
</script>
</select>

Upvotes: 1

Curtis
Curtis

Reputation: 103368

No you can't use a for loop in HTML. HTML is a markup language, you cannot use logical code. However you could use javascript to do your logic depending on what your objective is.

Here is an example using jQuery, a popular javascript library:

for(i=0; i<5; i++){
    $("select").append("<option>" + i + "</option>");
}

See example: http://jsfiddle.net/T4UXw/

Upvotes: -2

Related Questions