1つの配列で<select>をドロップダウン表示

Question

100色以上のリストが別々の<td>にあります。各<td>には一意のIDがあります。私はjQueryを使ってすべてのtdのIDを見つけて配列に入れたいと思っています。それから私は、そのアレイを使用して、次のようなものを作成したいと思います：

<select> 
    <option value="array[0]"> array[0]</option> 
    <option value="array[1]"> array[1]</option> 
    ... 
</select>` 

私がこれまで見てきたすべての例では、手動で配列を入力するコーダが必要です。私はもっ​​と効率的なものを探していたいと思っています。

Answer 1

$("td").get() 

は、すべての要素が一致する配列を取得します。 次に、配列の要素ごとにオプションの文字列を構築します。このような 何か：あなたはページ上の他のTDSを持っている場合は

var s = ""; 
var elements = $("td").get(); 
for (var i=0; i<elements.length; i++) { 
    var el = elements[i]; 
    s+='<option value="'+el.id+'">'+el.id+'</option>'; 
} 

は、（ "TD-親ツー必要-TDSであることを要素＃"）$のような何かを行います。

Answer 2

あなたはこのような何かを行うことができます：

var $select = $('<select>'); 
$('#tableID td[id]').each(function(idx){ 
    $select.append('<option value="' + this.id + '"> ' + this.id + '</option>'); 
}); 
$select.appendTo('#someElement'); 

Answer 3

あなただけの、あなたが作成し、配列をバイパスすることができ、ドロップダウンを移入するための配列が必要な場合。これは動作しません

<table id="colorsTable"> 
    <tr> 
     <td>...</td> 
    </tr> 
    . 
    . 
    . 
    . 
</table> 

<select id="colorsList" name="colorsList"> 
    <option value="array[0]"> array[0]</option>  
    <option value="array[1]"> array[1]</option> 
</select> 
<script type="text/javascript"> 
    function populateDropDown() 
    { 
     var colorsList = $("#colorsList"); 
     $("#colorsTable td").each 
     (
      function() 
      { 
       colorsList.append($("<option/>").val($(this).text())); 
      } 
     ); 
    } 
</script> 

Answer 4

var cells = $('table tr td'); 
var sel = $('<select>'); 

cells.each(function(cell) { 
var opt = document.createElement('option'); 
opt.value = cell.id; 
opt.innerHTML = cell.id; 
sel.append(opt); 
});