jQuery 在列表中重复选择选项

Question

我有以下情况

<div class="selectContainer">
<select size="1" id="kind">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div><p></p>

<p><div id="second">
<ul id="test"></ul></div></p>

我希望 jQuery 自动复制列表中的选项值，因此我将得到以下 HTML

<div id="second">
<ul id="test">
<li id="one">one</li>
<li id="two">two</li>
<li id="three">three</li>
</ul>
</div>

我以为下面的方法会起作用，但事实并非如此。我给了我一个列表项，其中包含“未定义”

 
$(function(){
 $("#kind").each(function () {
  li = '<li id="'+$(this).attr('value')+'">'+$(this).attr('text')+'</li>';
  $("#test").html(li);
 });
});

Answer 1

尝试:

$(function(){
    var lis = '';
    $("#kind option").each(function () {
        lis += '<li id="'+$(this).val()+'">'+$(this).text()+'</li>';
    });
    $("#test").html(lis);
});

您试图迭代#kind，它是单个元素，即 select 元素。您应该迭代选项。此外，每次迭代时，您都会重置所有 UL 的 HTML。

Check it here