JavaScriptを使用して選択タグにオプションを追加するにはどうすればよいですか？

私はボタンをクリックするだけで、オプションでいっぱいのタグを追加する、少しのJavaScriptを作成しようとしています。オプションは "roster"という配列で定義されます。私が見たいのは、sanchez、ronaldo、ozilのオプションがあるドロップダウンです。JavaScriptを使用して選択タグにオプションを追加するにはどうすればよいですか？

var roster = [ 
 
    "ozil", 
 
    "sanchez", 
 
    "ronaldo" 
 
]; 
 

 
var reps = null; 
 
var dropdown = null; 
 
var scorerOption = "<option value='" + reps + "' class='scorerOption'>" + roster[reps] + "</option>"; 
 

 
function makeDropdown() { 
 
    dropdown = "<select class='scorer'>" + String(scorerOption).repeat(roster.length) + "</select>"; 
 
    document.getElementById("rawr").innerHTML = dropdown; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <p id="rawr"><button onclick="makeDropdown()">Select a player</button></p> 
 
</body> 
 
</html>

お気づきのとおり、およびタグが表示されますが、すべてはinnerHTMLプロパティのと、 "未定義" の値を持っています。どうすればsanchez、ronaldo、ozilという名前が表示されるように変更できますか？

出典

2017-06-25 J. Smith

配列をループし、配列内の各要素に対して、新しいoptionを作成して挿入する必要があります。

また、インラインHTMLイベント処理属性（onclick）を使用しないでください。hereを参照してください。

最後に、文字列の管理が難しくなるため、DOMのAPI呼び出しであるdocument.createElement()を使用して動的要素を作成するのではなく、DOM APIでオブジェクト指向のクリーンな方法新しく作成された要素。

var roster = [ 
 
    "ozil", 
 
    "sanchez", 
 
    "ronaldo" 
 
]; 
 

 
// Work with your DOM elements in JavaScript, not HTML 
 
var btn = document.getElementById("btn"); 
 
btn.addEventListener("click", makeDropdown); 
 

 
function makeDropdown() { 
 
    // Dynamically generate a new <select> element as an object in memory 
 
    var list = document.createElement("select"); 
 
    
 
    // Configure the CSS class for the element 
 
    list.classList.add("scorer"); 
 
    
 
    // Loop over each of the array elements 
 
    roster.forEach(function(item){ 
 
    // Dynamically create and configure an <option> for each 
 
    var opt = document.createElement("option"); 
 
    opt.classList.add("scorerOption"); 
 
    opt.textContent = item; 
 
    // Add the <option> to the <select> 
 
    list.appendChild(opt); 
 
    }); 
 

 
    // Add the <select> to the document 
 
    document.getElementById("rawr").appendChild(list); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <p id="rawr"><button id="btn">Select a player</button></p> 
 
</body> 
 
</html>

出典

2017-06-25 16:12:27

私はあなたの答えを感謝し、私は実際に自分の問題を考え出しました。ドロップダウンを文字列に変換した後、ページを更新するだけでした。そこから、それはすべてうまくいった。 –

@ J.Smith嬉しいことですが、あなたのソリューションはかなり非効率的であり、ベストプラクティスに従わないことを知っておく必要があります。 –

JavaScriptを使用して選択タグにオプションを追加するにはどうすればよいですか？

答えて

関連する問題