"Seleccionar/Deseleccionar" múltiples campos seleccionados

Question

Tengo varios campos de selección definidos en una columna de tabla,

<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> 

me gustaría tener la característica de que cuando el usuario haga clic en el espacio de la columna, además de la selección campo, todas las opciones seleccionadas debe retroceder al estado no seleccionado, he utilizado la siguiente jQuery para implementar,

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

funciona sino que también afectan el campo de selección, que es cuando el usuario seleccione una opción, inmediatamente se cambie de nuevo a no seleccionado estado automáticamente, ¿cómo deshacerse de esto?

Answer 1

Sí, por supuesto, borrará el valor seleccionado inmediatamente después de que el usuario haya seleccionado algo de la lista desplegable.

Has colocado el <select> dentro del área que se ve afectada por la función .click(). Por lo tanto, siempre que el usuario haga clic en en la lista desplegable para elegir algo, se ejecuta su función y se borra la selección.

Tiene que cambiar la UI para que el lugar donde haga clic para borrar la selección esté en otro lugar.

Answer 2

Bueno, sí, enlazó el evento a toda la celda de la tabla, donde están seleccionados el cuadro y el texto, por lo que afecta a ambos. Código fijo:

<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

En Drupal 7 es necesario tener escritura siguiente con el fin de hacer que anule la selección de otros dos nombres cajas de selección de edición-tid-3 y edit-tid-4 cuando se hace clic en el primer cuadro de selección (edit-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

Mi enfoque sería un poco diferente, basándose únicamente en determinados clics, sin tener que añadir un nuevo botón/enlace a desmarcar, si nadie se preocupa por la adición de un atributo sel_val a <select></select>, todos por supuesto en el $(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

La mejor manera de resolver este problema sin crear efectos secundarios es usar el código de abajo.

$("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));});