Javascript 是否可以在 html 的 <select> 中使用 for 循环？如何？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12725265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to use a for loop in <select> in html? and how?
提问by user1438482
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.
我正在尝试在 html 中使用 for 循环，但我什至不知道这是否可能。是吗？如果是，如何？我不想使用 php。只有 html 和 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.
这是我的目标：我有一个包含 .txt 文件的文件。我想计算txt文件的数量，当我得到这个数字时，我想将它发送到我将使用for循环将txt文件的数字放入保管箱的地方。
Thanks
谢谢
回答by rlemon
Lots of answers.... here is another approach NOTusing document.write OR innerHTML OR jQuery....
很多答案.... 这是另一种不使用 document.write 或 innerHTML 或 jQuery 的方法....
HTML
HTML
<select id="foo"></select>
JS
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 Fiddleto demo it.
这是一个演示它的小提琴。
回答by Anuj
Yes you can for example write this code in html body tag
是的，例如，您可以在 html body 标记中编写此代码
<select>
<script language="javascript" type="text/javascript">
for(var d=1;d<=31;d++)
{
document.write("<option>"+d+"</option>");
}
</script>
</select>
回答by rajesh
One way is to use DynamicHTML. Let the html page have a place holder for the optionsof selecttag.
一种方法是使用 DynamicHTML。让 html 页面有一个optionsofselect标记的占位符。
<select id="selectBox"></select>
In a js file
在一个js文件中
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.
将上面的代码放在一个函数中并调用该函数 onload。
回答by Dolf Andringa
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
HTML 不是一种编程语言，只是一种标记语言，因此它不包括 for 循环或 if 语句之类的内容。Javascript 确实如此。您可以使用 javascript 来生成/操作 HTML，从而使用 for 循环在 <select> 中创建您的 <option> 标签。作为 javascript 的启动，请参阅结帐 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/
我不喜欢使用普通的 javascript，但我宁愿选择像 jQuery 这样的 javascript 框架来做到这一点。使用 jquery，使用 javascript 对 HTML dom 进行跨平台兼容操作真的很容易。您只需要在 HTML 中包含一些额外的 javascript 文件即可使其正常工作。见http://jquery.com/
An example of using jquery would be this:
使用 jquery 的一个例子是这样的：
<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/
你也可以在http://jsfiddle.net/6HUHG/3/上试试这个
回答by Tux9R
May be you can play with javascript and innerHTML. Try this
也许你可以玩javascript和innerHTML。尝试这个
HTML
HTML
<body onload="selectFunction()">
<select id="selectId">
</select>
Javascript
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;
}
}
回答by Curt
No you can't use a for loop in HTML. HTML is a markup language, you cannot use logical code. However you could use javascriptto do your logic depending on what your objective is.
不，您不能在 HTML 中使用 for 循环。HTML 是一种标记语言，您不能使用逻辑代码。但是，您可以使用javascript来执行逻辑，具体取决于您的目标是什么。
Here is an example using jQuery, a popular javascript library:
这是一个使用 jQuery（一个流行的 javascript 库）的示例：
for(i=0; i<5; i++){
$("select").append("<option>" + i + "</option>");
}
See example: http://jsfiddle.net/T4UXw/
参见示例：http: //jsfiddle.net/T4UXw/
