Question

我试图在html中使用for循环，但我甚至不知道这是否可行。是吗？如果是的话怎么样？我不想使用PHP。只有HTML和JavaScript。

这是我的目标：我有一个包含.txt文件的文件。我想计算txt文件的数量，当我得到我要发送的号码时，我将使用for循环将txt文件的数字放在一个dropbox中。

由于

Answer 1

很多答案......这是使用document.write或innerHTML或jQuery的另一种方法 NOT ....

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

这是一个Fiddle来演示它。

Answer 2

是的，你可以举个例子在html body标签

中编写此代码

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

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

Answer 3

一种方法是使用DynamicHTML。让html页面有options select标记的占位符。

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

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

将上述代码放在函数中并调用该函数onload。

Answer 4

HTML不是一种编程语言，只是一种标记语言，因此它不包含for循环或if语句之类的东西。但Javascript确实如此。您可以使用javascript生成/操作HTML，从而使用for循环来创建＆lt;选项＆gt; ＆lt; select＆gt;内的标签。作为javascript的初创公司，请查看checkout w3schools.com

我不喜欢使用普通的javascript，我宁愿选择像jQuery这样的javascript框架来做到这一点。使用jquery，使用javascript进行HTML dom的跨平台兼容操作非常容易。您只需要在HTML中包含一些额外的JavaScript文件即可使其正常工作。见http://jquery.com/

使用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>

您也可以在http://jsfiddle.net/6HUHG/3/

上试一试

Answer 5

可能你可以玩javascript和innerHTML。试试这个

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

Answer 6

不，你不能在HTML中使用for循环。 HTML是一种标记语言，您不能使用逻辑代码。但是，根据您的目标，您可以使用javascript来执行逻辑。

这是一个使用jQuery的例子，一个流行的JavaScript库：

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

参见示例：http://jsfiddle.net/T4UXw/

是否可以在html中的<select>中使用for循环？以及如何？</select>

6 个答案: