Question

HTML：

<body> 
<p><a href="#" class="link" >Apples</a> <a href="#" class="link" >Berries</a> <a href="#" class="link">Carrots</a></p>
<select id="list"></select>
</body>

Jquery：

$('.link').click(function(){
    var item = $(this).text();
    $('#list').append('<option>'+item+'<\option>');
});

它应该添加来自HTML链接标签的新值，例如苹果或胡萝卜，但是当我点击它时它会这样做（每个都有两行）

结果：

results

Evey点击结果有两个选项，其中一个是另一个，空白。更奇怪的是，如果我拿出html部分的东西似乎有效..只需使用文字。

Answer 1

我不确定为什么会导致这种行为，但问题是

$('#list').append('<option>'+item+'<\option>');

应该是正斜杠

$('#list').append('<option>'+item+'</option>');

Answer 2

这种方法对我来说很好。

$(function(){

   $('.link').click(function(){
      var item = $(this).text();
      $('<option>'+item+' </option>').appendTo($("#list"));
    });;

});

工作样本：http://jsfiddle.net/mKTzx/4/

jQuery自己追加运行两次，多次追加，双追加

2 个答案: