[JQUERY] Ctrl 키를 사용하지 않고 HTML Select 요소에서 여러 번 선택

Ctrl 키를 사용하지 않고 HTML Select 요소에서 여러 번 선택

해결법

1. ---

   1.Element.ScrolTtop을 저장하고 끝에 설정할 수 있습니다.

   Element.ScrolTtop을 저장하고 끝에 설정할 수 있습니다.

   $("select").mousedown(function(e){
       e.preventDefault();
   
       var select = this;
       var scroll = select .scrollTop;
   
       e.target.selected = !e.target.selected;
   
       setTimeout(function(){select.scrollTop = scroll;}, 0);
   
       $(select ).focus();
   }).mousemove(function(e){e.preventDefault()});
   

   http://jsfiddle.net/UziTech/cjjg68dr/114/

2. ---

   2.Tony의 답변은 마우스를 누른 경우에만 작동하므로 선택 화살표 버그가 있습니다.

   Tony의 답변은 마우스를 누른 경우에만 작동하므로 선택 화살표 버그가 있습니다.

   몇 가지 솔루션을 이에 결합했으며 적어도 크롬 및 FF에서는 잘 작동합니다.

   // multiple select: selectable without Control
   $('select[multiple] option').on('mousedown', function(e) {
       var $this = $(this),
           that = this,
           scroll = that.parentElement.scrollTop;
   
       e.preventDefault();
       $this.prop('selected', !$this.prop('selected'));
   
       setTimeout(function() {
           that.parentElement.scrollTop = scroll;
       }, 0);
   
       return false;
   });
   

3. ---

   3.순수한 JS 솔루션은 다음과 같습니다.

   순수한 JS 솔루션은 다음과 같습니다.

   element.onmousedown= function(event) {
       //this == event.target
       event.preventDefault();
       var scroll_offset= this.parentElement.scrollTop;
       this.selected= !this.selected;
       this.parentElement.scrollTop= scroll_offset;
   }
   element.onmousemove= function(event) {
       event.preventDefault();
   }
   

   옵션을 선택 / 선택 취소하기 전에 상위 요소 (선택 상자)를보고 수직 스크롤 오프셋을 녹음하십시오. 그런 다음 액션을 수행 한 후에 수동으로 재설정하십시오.

   MouseMove 이벤트의 기본 동작을 방지하는 추론은 마우스를 움직이는 동안 옵션을 클릭하지 않고 옵션을 클릭하면 모든 옵션이 선택되지 않기 때문입니다.

4. ---

   4.다음은 크롬 FF에서 작동하는 것으로 보이는 솔루션입니다. 클릭 할 때 조금 깜박이기 때문에 끔찍한 것은 아닙니다.

   다음은 크롬 FF에서 작동하는 것으로 보이는 솔루션입니다. 클릭 할 때 조금 깜박이기 때문에 끔찍한 것은 아닙니다.

   var vals = [];
   $("select[multiple]").click(function(e){
           var scroll_offset= this.scrollTop;
         var newVals = $(this).val();
       if (newVals.length === 1) {
           var index = vals.indexOf(newVals[0])
           if (index > -1) {
           vals.splice(index, 1);
         } else {
           vals.push(newVals[0])
         }
         $(this).val(vals);
         this.scrollTop = scroll_offset;
       }
   });
   

   jsfiddle.

5. ---

   5.Chrome의 순수한 JS 솔루션은 "OnMouseUp"에서 이벤트 리스너를 대신 설정합니다. 스크롤을 첫 번째 요소로 재설정하는 이벤트는 마우스 업에서 해고됩니다. 그래서 예를 들어 :

   Chrome의 순수한 JS 솔루션은 "OnMouseUp"에서 이벤트 리스너를 대신 설정합니다. 스크롤을 첫 번째 요소로 재설정하는 이벤트는 마우스 업에서 해고됩니다. 그래서 예를 들어 :

   element.onmouseup = function(event) {
       event.preventDefault();
       var st = this.scrollTop;
       setTimeout(function () { element.scrollTop = st; }, 0);
   };
   

6. ---

   6.이것은 바닐라 JS이기 때문에 다른 제안보다 저에게 더 잘 작동했으며 원본과는 비슷하게 행동합니다. 예를 들어 Shift 키를 통해 많은 항목을 빠르게 선택할 수 있습니다.

   이것은 바닐라 JS이기 때문에 다른 제안보다 저에게 더 잘 작동했으며 원본과는 비슷하게 행동합니다. 예를 들어 Shift 키를 통해 많은 항목을 빠르게 선택할 수 있습니다.

   element.onmousedown = function(event) {
       if (event.shiftKey) return;
       event.preventDefault();
       this.focus();
       var scroll = this.scrollTop;
       event.target.selected = !event.target.selected;
       this.scrollTop = scroll;
       // make sure that other listeners (like Vue) pick up on the change
       // even though we prevented the default.
       this.dispatchEvent(new Event("change"));
   }
   

7. ---

   7.짧은 퀵 버전

   짧은 퀵 버전

   // 이것은 Specyfic ID -> $ ( '# wostatuskey')를위한 것입니다. // 아래의 모든 여러 선택에 대해서는 아래에 있습니다 $ ( '} e.target.Selected =! e.target.Selected; e.StopPropagation (); 거짓 반환; })