jQuery를 추가하려고 시도합니다.

Question

사용자가 드롭 다운 목록에서 옵션을 선택한 후에 요소를 만들려고합니다. 불행히도 나는 기꺼이 원하는 결과를 얻지 못하고있다. 내가 달성 한 결과는 다음과 같이 보았다 : 링크를 참조로

은 '제거'사용자에 의해 만들어졌다 선택한 각 옵션 다음에 증가됩니다. 또한 생성 된 div과 앵커 요소 사이에는 공백이 없습니다. 내가 증가 링크를 해결하기 위해 루프가 필요하다고 생각 remove. 하지만 어떻게해야할지 모르겠다. 나는 다음을 시도 :

$("#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"); 
 
    }); 
 
});

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

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; 
  

  마지막을 될 수있을 때

  가능 선호 ..

• 당신은 또한 당신이 작성 이후 id5를 제거해야 당신이 새로운 각 시간을 만들 수 있기 때문에 당신이 select 요소
• 을 변경, 그냥 숨기고 대신 요소를 제거하는 데 필요한 rel 속성을
• 를 설정해야 여러 동일한 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 (간호사, 환자)입니다.

하지만 할 일은 a의 마지막 태그에만 remove을 추가하는 것입니다. 그런 다음

:

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

당신을 위해 작동합니다.