이벤트 후 옵션 2 플러그인 제거 옵션 목록에서 항목을 제거하십시오.

Question

나는 selec2 plugin을 사용하며, 주 옵션 목록에서 옵션을 제거하고 싶습니다. 이 코드로 "x"버튼을 클릭하면 플러그인 목록에서 삭제됩니다. 닫히고 열리면 복구됩니다.

아무도 도와 줄 수 있습니까?

jsfiddle

HTML :

<select id="select"> 
    <option value="Provider 1">Provider 1</option> 
    <option value="Provider 2">Provider 2</option> 
    <option value="Provider 3">Provider 3</option> 
    <option value="Provider 4">Provider 4</option> 
    <option value="Provider 5">Provider 5</option> 
</select> 

JS :

function format(state) { 
    if (state.id == null) { 
    return state.text; 
    } 

    var $option = $("<span></span>"); 
    var $preview = $('<span class="select2-item-remove">×</span>'); 
    $preview.on('mouseup', function (e) { 
    e.stopPropagation(); 
    }); 

    $preview.on('click', function (e) { 
    $(this).closest('li').remove(); 
    }); 

    $option.text(state.text); 
    $option.append($preview); 

    return $option; 
} 

$("#select").select2({ 
    templateResult: format, 
    escapeMarkup: function (m) { return m; } 
}); 

Answer 1

은 또한 옵션 요소를 제거해야합니다.

은 그래서 여기 바이올린이 업데이트됩니다 :

https://jsfiddle.net/beaver71/0wz9m7gz/

$(document).ready(function() { 
 
    function format(state) { 
 
    if (state.id == null) { 
 
     return state.text; 
 
    } 
 

 
    var $option = $("<span></span>"); 
 
    var $preview = $('<span data-opt="'+state.element.id+'" class="select2-item-remove">×</span>'); 
 
    $preview.on('mouseup', function (e) { 
 
     e.stopPropagation(); 
 
    }); 
 

 
    $preview.on('click', function (e) { 
 
     $(this).closest('li').remove(); 
 
     var opt = $(this).data('opt'); 
 
     $("#"+opt).remove(); 
 
    }); 
 

 
    $option.text(state.text); 
 
    $option.append($preview); 
 

 
    return $option; 
 
    } 
 

 
    $("#select").select2({ 
 
    templateResult: format, 
 
    escapeMarkup: function (m) { return m; } 
 
    }); 
 
});

.select2-results__option { 
 
    position: relative; 
 
} 
 
.select2-item-remove { 
 
    position: absolute; 
 
    right: 9px; 
 
    top: 5px; 
 
    z-index: 1100; 
 
    z-index: 9999; 
 
    cursor: default; 
 
    display: block; 
 
    font-weight: bold; 
 
    font-size: 15px; 
 
    padding: 0 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.css" rel="stylesheet"/> 
 

 
<select id="select" multiple="multiple" style='width:300px'> 
 
    <option id="opt1" value="Provider 1">Provider 1</option> 
 
    <option id="opt2" value="Provider 2">Provider 2</option> 
 
    <option id="opt3" value="Provider 3">Provider 3</option> 
 
    <option id="opt4" value="Provider 4">Provider 4</option> 
 
    <option id="opt5" value="Provider 5">Provider 5</option> 
 
</select>