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

后端未结

关注

 6  1520

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

相关标签:

6条回答

心在旅途

2021-01-05 20:52

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

HTML

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

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

0 讨论(0)

醉梦人生

2021-01-05 20:54
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/
0 讨论(0)
发布评论:

提交评论
- 加载中...

感动是毒

2021-01-05 20:58

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>

0 讨论(0)

野趣味

2021-01-05 21:00
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/
0 讨论(0)
发布评论:

提交评论
- 加载中...

我在风中等你

2021-01-05 21:03

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;   
    } 
}

0 讨论(0)

陌清茗

2021-01-05 21:13

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.

0 讨论(0)