복수 선택 필드 (Jquery Select2 플러그인)

Question

Jquery Select2 플러그인을 사용하여 다중 선택 입력 필드를 생성하고 있습니다.

$(document).ready(function() { 
     $("#category_tags___name___tagname").select2(
       {placeholder: "Select tags"}, 
     ); 

이제 서버 측에서이 같은 약 보이는 HTML 양식을 생성하는 PHP 프레임 워크 (Symfony2)을 사용하고 있습니다 :

페이지 https://select2.github.io/examples.html의 예에 표시된 것과 마찬가지로, 나는 내 코드를 만들었습니다

<select id="category_tags___name___tagname" name="category[tags][__name__][tagname][]" required="required" style="width:300px" multiple="" tabindex="-1" class="select2-hidden-accessible"> 
      <option value="1">tag1</option> 
      <option value="2">tag2</option> 
      <option value="3" selected="selected">tag3</option> 
</select> 

이 항목을 클릭하면 필드를 클릭하면 사용할 수있는 옵션이 드롭 다운 목록에 나타납니다. 그러나 문제는 일단 옵션을 선택하면 태그로 필드에 추가되지만 드롭 다운 목록에 여전히 나타나며 즉 disbaled가 아닙니다. 드롭 다운에서 해당 옵션을 다시 클릭하면 선택이 취소됩니다.

일단 옵션을 선택하면 필드에 태그로 나타나야하지만 더 이상 드롭 다운 목록에 나타나지 않아야한다는 기능이 필요합니다.

가능한 해결책을 웹에서 검색했습니다. 그러나 지금까지 아무 것도 발견하지 못했습니다.

저는 Jquery를 처음 사용합니다. 그래서 모든 도움을 주시면 감사하겠습니다.

Answer 1

심판이 사이트에 주어진 문서에 따르면 https://select2.github.io/examples.html는 한 가지 방법은 당신이 당신에게 사용자 정의 동작을 트리거 select2:select 및 select2:unselect 이벤트를 사용하는 것 계신 달성하기 위해 :

은 다음과 같은 것을 시도 :

당신의 js에서

<option value="1" id='specific-1'>tag1</option> 
    <option id='specific-2' value="2">tag2</option> 
    <option value="3" id='specific-3' selected="selected">tag3</option> 

:

당신의 HTML에서 먼저 각 옵션 값을 같은 특정 ID 뭔가를 줄

//when select is triggered 
$("#category_tags___name___tagname").on("select2:select", function (e) { 
    var myID = '#'+e.data.id //getting specific id from event 
    $(myID).css('display','none') //hide it using css 
}); 

//when unselect is triggered 
$("#category_tags___name___tagname").on("select2:unselect", function (e) { 
    var myID = '#'+e.data.id //getting specific id from event 
    $(myID).css('display','block') //show it using css 
}); 

p.s : 위의 코드는 테스트되지 않았습니다. 하지만 논리가 맞는 것처럼 보입니다.

Answer 2

나는 클라이언트 측에 json 유형으로 데이터를 보내는 것을 선호합니다. 내가 예를 들어 줄 것을 제안한다면

data = "[{id :" ", 텍스트 :" "}, {id :" ", text}]";

위와 같은 데이터를 보내면 여러 개를 선택할 수 있으며 하나를 선택하면 다시 표시되지 않습니다.

$ ('# id'). select2 ('data', data);

및 HTML 페이지에 대한 당신은 충분히있는 텍스트 상자를 만들 수 있습니다 선택 2