jquery - ドロップダウン（選択ボックス）のすべての値を取得し、任意のdivに書き込む方法

Question

私はドロップダウン（選択）ボックスを持っています

<select name="drp_name" id="drp_name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

すべてのオプション値を取得し、次のような div に書き込み (印刷) したい:

<div id="main_div">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

Answer 1

非常に簡単です：

$('#drp_name option').map(function() {
    return $('<div />', {text: $(this).text()}).get(0); // or this.value / $(this).val()
}).appendTo('#main_div');

参考：.map、.appendTo

デモ

Answer 2

$('#main_div').empty();
$('#drp_name option').each(function() {
  $('#main_div').append('<div>'+ $(this).text() +'</div>');
});

デモ

あなたdivの#main_divが以前に存在する場合

$('#drp_name option').each(function(index, item) {
  $('#main_div div').eq(index -1).html($(this).text());
});

また

$('#main_div').empty();
$('#drp_name option').filter(function() {
  $('#main_div').append('<div>'+ $(this).text() +'</div>');
});

デモ

注必要valueに応じて を使用してthis.valueください。

Answer 3

var div = $('#main_div').empty();
$('#drp_name > option').each(function() {
    $('<div/>').text($(this).text()).appendTo(div);
});

オプションのテキストではなく値が必要な場合は、 に置き換え$(this).text()ますthis.value。