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>

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

我希望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>

我认为以下内容可行，但事实并非如此。我给了我一个带有'undefined'的列表项

 
$(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

Answer 2

另一种方式，只是为了好玩（加上它既简洁又有效）：

$("#test").html($("#kind > option").map(function() {
    return '<li id="' + this.value + '">' + $(this).text() + '</li>';
}).get().join(""));

Try it here.

如果它有任何意义，这里是关于正常字符串追加与Array.join()的讨论：

http://www.sitepoint.com/javascript-fast-string-concatenation/

Answer 3

尝试使用

$("option", "#kind").each(function () {

相反，看起来像选择本身也被转换

Answer 4

这是一个有效的jsfiddle：fiddle demo

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

    });
    $("#test").html(li);
});

Answer 5

你很接近，应该是

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

您需要获取选项，您的选择器仅检索select元素。
您需要使用.val（）和.text（）。 attr找不到你需要的东西。
您需要使用.append（），使用.html（）只会在每次循环时覆盖内容。

jQuery列表中的重复选择选项

5 个答案: