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的 s inside#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。