Question

我尝试在用户从我的下拉列表中选择一个选项后创建一个元素。不幸的是，我没有得到我乐意想要的结果。我取得的成绩如下：

Faulty result

如您所见，链接＆＃39;删除＆＃39;在用户做出的每个选定选项之后增加。创建的div和锚元素之间也没有空格。我想我需要一个for循环来修复递增链接remove。但我真的不知道如何。我尝试过以下方法：

＆＃13;

$("#theSelect").change(function() {
  var value = $("#theSelect option:selected").val();
  var theDiv = $(".is" + value);

  //theDiv.slideDown().removeClass("hidden");
  $("#theSelect option:selected").attr('disabled', 'disabled');

  var $div = $("<div>", {
    id: "foo",
    class: "a",
    text: value
  });
  //$div.click(function(){ /* ... */ });
  $(".selectContainer").append($div);

  var newLink = $("<a />", {
    id: "id5",
    name: "link",
    href: "#",
    text: "remove"
  });

  $(".a").append(newLink);

});

$("div a.remove").click(function() {
  var value = $(this).attr('rel');
  var theDiv = $(".is" + value);

  $("#theSelect option[value=" + value + "]").removeAttr('disabled');

  $(this).parent().slideUp(function() {
    $(this).addClass("hidden");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectContainer">
  <select id="theSelect">
    <option value="">- Select -</option>
    <option value="Patient">Patient</option>
    <option value="Physician">Physician</option>
    <option value="Nurse">Nurse</option>
  </select>
</div>
<!-- <div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div> -->
<!-- <div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Physician">remove</a></div> -->
<!-- <div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Nurse">remove</a></div> -->

＆＃13;

Answer 1

重要的错误是您要将删除链接附加到所有div.a元素

只需将其附加到新创建的（您有对它的引用）

而不是

$(".a").append(newLink);

使用

$new.append(newLink);

此外，如果您多次访问它们，则应该缓存对您使用的元素的引用。在可用时，首选使用本机属性

所以这个

var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);

//theDiv.slideDown().removeClass("hidden");
$("#theSelect option:selected").attr('disabled','disabled');

可以成为

var option = this.options[this.selectedIndex],
    value = option.value,
    theDiv = $(".is" + value);

option.disabled = true;

最后，

您可以在创建时将删除处理程序绑定到元素..
您还需要设置rel属性
您需要删除元素而不是隐藏它，因为每次更改select元素时都会创建新元素
您需要删除id5，因为您创建了多个具有相同ID且无效的链接

所有变化一起

$("#theSelect").change(function(){          
    var option = this.options[this.selectedIndex],
        value = option.value;

    var theDiv = $(".is" + value);

    //theDiv.slideDown().removeClass("hidden");
    option.disabled = true;

    var $div = $("<div>", {id: "foo", class: "a", text: value });
    //$div.click(function(){ /* ... */ });
    $(".selectContainer").append($div);

    var newLink = $("<a />", {
        name : "link",
        href : "#",
        text : "remove",
        rel : value,
        click: remove
    });

    $div.append(newLink);    

});

function remove() { 
    var value = $(this).attr('rel');
    var theDiv = $(".is" + value);

    $("#theSelect option[value=" + value + "]").removeAttr('disabled');

    $(this).parent().slideUp(function() { $(this).remove(); });
};

http://jsfiddle.net/gaby/pzq8hqjw/7/

演示

Answer 2

$(".a").append(newLink);

将newLink附加到所有匹配的代码。在你的情况下，每个标签都有a类（即护士，病人）。

但您要做的是将remove仅附加到具有类a的最后一个标记。

然后：

$(".a:last").append(newLink);

会为你效劳。

试图追加一个元素jQuery

2 个答案: