Jquery 필터가 예상대로 작동하지 않습니다.

Question

<div id="div1"> 
<input id="input1"> 
<select multiple="multiple" id="select1"> 
    <option value="sandeep">sandeep</option> 
    <option value="ram">ram</option> 
    <option value="raj">raj</option> 
    <option value="pak">pak</option> 
    <option value="abc">abc</option> 
    <option value="dog">dog</option> 
    <option value="cat">cat</option> 
    <option value="journey">journey</option> 
    <option value="mahesh">mahesh</option> 
</select> 
</div> 

<script type="text/javascript"> 
    var selectClone1; 
    selectClone1 = $('#select1 option').clone(); 
    $('#input1').on('keyup', function(){ 
     $('#select1 option').remove(); 
     var value = $(this).val(); 

     selectClone1.filter(function(index, element){ 
       console.log('index : '+index); 
       console.log('element : '+element); 
       return value == '' || element.value.indexOf(value) >= 0; 
      }).appendTo('#select1'); 
    }); 

    $('#select1').on('click', function(){ 
      var option = $('option:selected', this).clone(); 
      $('option:selected', this).remove(); 
      selectClone1 = $.grep(selectClone1, function(el){return el.value == option[0].value}, true); 
</script> 

사용자가 옵션을 클릭했을 때 옵션 제거와 함께 검색 기능을 수행하고 있습니다. 위의 코드는 검색을 위해 올바르게 작동하지만 값을 검색 한 후 선택 상자에서 삭제할 옵션을 클릭하면 필터 함수 (인덱스, 요소)의 매개 변수가 교환됩니다. 그것 때문에 오류가오고있다. 요점을 놓치고있는 사람들을 도와 줄 수 있습니까?

Answer 1

주 어레이에서 요소를 제거하고 복제 할 필요가없는 Array의 접합 방법을 사용하는 것이 더 좋습니다.

$('#select1').on('click', function(){ 
     var option = $('option:selected', this); 
     $('option:selected', this).remove(); 
     selectClone1.splice($.inArray(option[0], selectClone1), 1); 
});