2017-04-05 4 views
0

Hey everyone私は配列のドロップダウンリストに値を設定しようとしていますが、JSFiddleで同じコードを使用するとうまくいきません。JSFiddleで動作しているアレイからドロップダウンリストを入力しますが、ローカルマシンでは動作しませんか?

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 
for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    alert(); 
    select.appendChild(el); 
    alert(); 
} 

最初の警告ボックスが表示されますが、第2警告ボックスが選択で終了するループのすなわち最初の反復を実行している表示されません下記のように私は、アラートボックスを使用する場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="js/jquery-1.9.1.js"> 
</script> 
<script type="text/javascript"> 

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 
for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
} 
</script> 
</head> 

<body> 

<select id="selectNumber"> 
    <option>Choose a number</option> 
</select> 
</body> 
</html> 

を助けてください。 appendChild(el);.

+0

コンソールにエラーがありますか? – Arg0n

+0

@ Arg0nコンソール上にエラーや警告はありません。しかし初心者である私は、私が正しい要素を調べて、次に空であるConsoleタブを選択するために行く正しい場所を見ているか分からない。 – phpNoob

+0

@ Arg0n次のエラーが表示されます。TypeError:select is nullページを更新したときにコンソールで[詳細]をクリックします。 – phpNoob

答えて

1

このようdocument.ready関数内でJavaScriptコードを入れてください:スクリプトが実行された後にDOMが初期化されたため、

<script type="text/javascript"> 
$(document).ready(function() { 
var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5"]; 
for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
} 
}); 
</script> 

あなたの値が追加されませんでした。あなたのコードをdocument.ready関数に入れるのは良い習慣です。

関連する問題