"선택/선택 취소"여러 선택 필드

Question

나는 테이블 컬럼에 정의 된 여러 선택 필드가,

<table border=1> 
    <tr> 
     <td>THIS IS THE PLACE TO SELECT THE PROJECTS</td> 
    </tr> 
    <tr> 
    <td id="select_project"> 
     <select class="projects" id="projects" multiple="multiple" name="projects[]" size="10"> 
     <option value="1">Project 1</option> 
     <option value="2" selected="selected">project 2</option> 
     <option value="3">Project 3</option> 
    </select> 
    CLICK HERE SHOULD "UNSELECT" 
</td> 
</tr> 
</table> 

내가 기능을하고 싶은 것을 할 때 선택 이외의 컬럼의 공간에 사용자가 클릭 필드는 선택한 모든 옵션이 즉시 선택되지 않은 다시 변경, 사용자가 옵션을 선택하면 그건,

$("#select_project").bind('click', function(){ 
    $('#projects option').attr('selected', false); 
    return false; 
}); 

그것은 작동하지만 그것은 또한 선택 필드에 영향을 미치는, 내가 구현하기 위해 다음과 같은 jQuery를 사용하고 선택되지 않은 상태로 백업해야합니다 상태를 자동으로 제거하는 방법?

Answer 1

물론 사용자가 드롭 다운 목록에서 항목을 선택한 후 즉시 선택한 값이 지워집니다.

.click() 기능의 영향을받는 영역 안에 <select>을 넣었습니다. 따라서 사용자 이 무언가를 선택하기 위해 드롭 다운 목록에서을 클릭 할 때마다 기능이 실행되고 선택 항목이 지워집니다.

선택을 취소 할 곳을 다른 곳으로 변경하려면 UI를 변경해야합니다.

Answer 2

글쎄, 네가 상자와 텍스트를 선택하는 전체 테이블 셀에 이벤트를 바인딩 했으므로 두 가지 모두에 영향을 미친다. 고정 코드 :

당신이 첫 번째 선택 상자를 클릭하면 선택 해제 다른 두 selectboxes 이름 편집-TID-3 및 편집-TID-4 만들기 위해 다음과 같은 기록이 필요 드루팔 7에서

<table border=1> 
    <tr> 
     <td>THIS IS THE PLACE TO SELECT THE PROJECTS</td> 
    </tr> 
    <tr> 
    <td id="select_project"> 
     <select class="projects" id="projects" multiple="multiple" name="projects[]" size="10"> 
     <option value="1">Project 1</option> 
     <option value="2" selected="selected">project 2</option> 
     <option value="3">Project 3</option> 
    </select> 
    <a href="#" id="unselect">CLICK HERE SHOULD "UNSELECT"</a> 
</td> 
</tr> 
</table> 

$("#unselect").bind('click', function(){ 
    $('#projects option:selected').removeAttr("selected");; 
    return false; 
}); 

Answer 3

(편집-TID -2)

jQuery("#edit-tid-2").bind('click', function(){ 
       jQuery('#edit-tid-3 option:selected').removeAttr("selected"); 
         jQuery('#edit-tid-4 option:selected').removeAttr("selected"); 
         return false; 
    }); 

Answer 4

아무도에서, <select></select>에 sel_val 속성을 추가하는 방법에 대한 물론 모든 관심이없는 경우 내 접근 방식은, 취소 할 수있는 새로운 버튼/링크를 추가 할 필요없이 선택 클릭에만 의존, 좀 다른 것 $(function(){ //HERE }); :

$('select[multiple=multiple]').on('click',function(e){ 
    e.preventDefault(); 
    var $this = $(this); 
    var selectedOpts = $("option:selected",$this); 
    if(selectedOpts.length == 1){ 
     selectedOpts.each(function(){ 
      if($this.attr('sel_val') == $(this).val()){ // if clicking 2nd time on this 
       selectedOpts.removeAttr('selected'); 
       $this.removeAttr('sel_val'); 
       $this.trigger('blur'); 
      }else // if clicking for the first time 
       $this.attr('sel_val',$(this).val()); 
     }); 
    } 

}); 

$('select[multiple=multiple]').each(function(){ 
    var $this = $(this); 
    var selectedOpts = $("option:selected",$this); 
    if(selectedOpts.length == 1){ // if one item selected only, make it unselectable 
     selectedOpts.each(function(){ 
      $this.attr('sel_val',$(this).val()); 
     }); 
    } 
}); 

Answer 5

부작용을 만들지 않고이 문제를 해결하는 가장 좋은 방법은 벨로우즈 코드를 사용하는 것입니다.

$("select[multiple] option") 
.attr({"d_sel":false,"selected":false}) 
.mouseover(function(){this.d_sel=this.selected;}) 
.click(function(){this.d_sel=(this.selected=(!this.d_sel));});