jqueryを使用してhtmlテーブルにドロップダウンを作成する方法

Question

私はID「myTable」と配列「myArray」を持つhtmlテーブルを持っています。 myArrayの値を使ってテーブルをドロップダウンしたいと思います。どうやってやるの？

私は配列を繰り返してドロップダウンを行う必要がありますが、どのようにする必要がありますか？これを簡単に行うためのjQueryの方法はありますか？

<script> 
      var myArray = ["one", "two", "three"]; 

      var table = document.getElementById("myTable"); 

      var row = table.insertRow(0); 

      var cell1 = row.insertCell(0); 
      var cell2 = row.insertCell(1); 
      var cell3 = row.insertCell(2); 


      cell1.innerHTML = "something"; 
      cell2.innerHTML = "something else"; 
      cell3.innerHTML = myArray; //This should be a dropdown 
    </script> 

Answer 1

のjQueryここであなたに多くの労力を救うことはありません。これは、比較のため、純粋なJavaScriptのソリューションのようになります。

var myArray = ["one", "two", "three"]; 
 
var dropdown = "<select>\n"; 
 
myArray.forEach(addOption); 
 
dropdown += "</select>"; 
 
document.getElementById("dropdown").innerHTML = dropdown; 
 

 
function addOption(item, index) { 
 
    dropdown += "\t<option value='" + item + "'>" + item + "</option>\n"; 
 
}

<div id='dropdown'></div>

Answer 2

これは、使用しても構いませんが、ここではjQueryを使用したソリューションです。

   var myArray = ["one", "two", "three"]; 
 

 
      var $table = $("#myTable"); 
 
      var $tr = $('<tr>'); 
 
      $tr.html('<td>something</td><td>something else</td><td class="options"></td>'); 
 
       
 
      var $select = $('<select>'); 
 
      for (var i=0; i<myArray.length; i++) { 
 
       $('<option>').html(myArray[i]).appendTo($select); 
 
      } 
 
      $select.appendTo($tr.find('.options')); 
 
      $tr.appendTo($table);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable" border="1" cellspacing="0" cellpadding="0"></table>

Answer 3

あなたは以下のようにそれを行うことができますので、jQueryのは、そこにタグ付けされているので： -

の作業スニペット： -

$(document).ready(function(){ 
 
    var myArray = ["one", "two", "three"]; 
 
    var option = ''; 
 
    $.each(myArray,function(key,value){ 
 
    option += "<option value"+key+">"+value+"</option>"; 
 
    }); 
 
    $('#select').html(option); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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