6 に答える
たくさんの答え.... 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)
}());
そして、ここにそれをデモするためのフィドルがあります。
はい、たとえば、このコードを html body タグに記述できます
<select>
<script language="javascript" type="text/javascript">
for(var d=1;d<=31;d++)
{
document.write("<option>"+d+"</option>");
}
</script>
</select>
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;
}
}
1 つの方法は、DynamicHTML を使用することです。html ページにoptionsofselectタグのプレースホルダーを持たせます。
<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 と呼びます。
HTMLはプログラミング言語ではなく、単なるマークアップ言語であるため、forループやifステートメントなどは含まれていません。ただし、Javascriptはそうします。javascriptを使用してHTMLを生成/操作し、forループを使用して<select>内に<option>タグを作成できます。javascriptのスタートアップとして、checkoutw3schools.comを参照してください。
プレーンなJavaScriptを使用するのは好きではありませんが、これを行うにはjQueryのようなJavaScriptフレームワークを選択したいと思います。jqueryを使用すると、javascriptを使用してHTMLDOMのクロスプラットフォーム互換の操作を行うのは非常に簡単です。HTMLを機能させるには、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/でこれを試すこともできます
いいえ、HTML で for ループを使用することはできません。HTML はマークアップ言語であるため、論理コードは使用できません。ただし、目的に応じて、javascriptを使用してロジックを実行できます。
一般的な JavaScript ライブラリである jQuery を使用した例を次に示します。
for(i=0; i<5; i++){
$("select").append("<option>" + i + "</option>");
}
例を参照してください: http://jsfiddle.net/T4UXw/