¿Cómo se alterna la selección de una opción en una selección múltiple con jQuery?

Question

Tengo un select multiple Campo de entrada estándar HTML, por ejemplo:

<select multiple="multiple" size="5" id="mysel" name="countries"> 
    <option value="2">Afghanistan</option> 
    <option value="4">Aland</option> 
</select> 

ya que es una selección múltiple, para seleccionar más de un valor que hay que mantener pulsada la tecla CTRL y seleccione los elementos adicionales. Sin embargo, lo que quiero lograr es que:

1. Al hacer clic en una opción no seleccionada, ésta se selecciona
2. Al hacer clic en la opción seleccionada anula la selección de la misma.

La idea es evitar tener que pulsar la tecla CTRL y cambiar la semántica de uso de este campo de entrada. Los elementos solo deben poder seleccionarse y no seleccionarse al hacer clic (es decir, al alternar entre los estados de selección).

Todavía no he podido implementar esto. El pseudo-código debería verse más o menos así.

1. Catch a Click event.
2. Compruebe si el elemento al que se hizo clic no estaba seleccionado, luego selecciónelo
3. O, si el elemento que se hizo clic fue seleccionado, desáréguelo.

¿Cómo debo implementar esto?

Answer 1

Usted puede utilizar el siguiente fragmento de lograr el efecto deseado

$("select[multiple] option").mousedown(function(){ 
    var $self = $(this); 

    if ($self.prop("selected")) 
      $self.prop("selected", false); 
    else 
     $self.prop("selected", true); 

    return false; 
}); 

En las versiones anteriores de jQuery, donde prop() no estaba disponible:

$("select[multiple] option").mousedown(function(){ 
    var $self = $(this); 

    if ($self.attr("selected")) 
      $self.attr("selected", ""); 
    else 
     $self.attr("selected", "selected"); 

    return false; 
}); 

Answer 2

Tiene razón al querer cambiar el comportamiento predeterminado de seleccionar múltiples campos de entrada. Tienden a contribuir negativamente a la experiencia del usuario ya que el propósito no se transmite con claridad y los usuarios pueden no entender cómo usarlos correctamente.

Volver a proponer un cuadro de selección múltiple tampoco está bien. Si está considerando usar seleccionar múltiples, entonces puede que desee refactorizar su diseño. ¿Quizás pueda usar casillas de verificación en su lugar?

He aquí un artículo sobre el tema: http://www.ryancramer.com/journal/entries/select_multiple/

Answer 3

Probablemente alguna corrección viene con las nuevas versiones de jQuery:

$("select[multiple] option").mousedown(function(){ 
    var $self = $(this); 

    if ($self.attr("selected")){ 
     $self.removeAttr("selected"); 
    } else { 
     $self.attr("selected", "selected"); 
    } 
    return false; 
}); 

Answer 4

Otra variante sin jQuery:

var multiSelect = {}; 

function init() {  
    var s = document.getElementsByTagName('select'); 
    for (var i = 0; i < s.length; i++) { 
    if (s[i].multiple) { 
     var n = s[i].name; 
     multiSelect[n] = []; 
     for (var j = 0; j < s[i].options.length; j++) { 
     multiSelect[n][j] = s[i].options[j].selected; 
     } 
     s[i].onclick = changeMultiSelect; 
    } 
    } 
} 

function changeMultiSelect() { 
    var n = this.name; 
    for (var i=0; i < this.options.length; i++) { 
    if (this.options[i].selected) { 
     multiSelect[n][i] = !multiSelect[n][i]; 
    } 
    this.options[i].selected = multiSelect[n][i]; 
    } 
} 

window.onload = init; 

Answer 5

usando jQuery 1.9.1 del código JavaScript es:

$("select[multiple] option").mousedown(function() { 
     var $self = $(this); 
     if ($self.prop("selected")) 
      $self.removeAttr("selected"); 
     else 
      $self.attr("selected", "selected"); 
     return false; 
    }); 

Answer 6

simplemente he intentado esta solución y la respuesta seleccionada no funcionó para jQuery 1.9.1

La respuesta de Oscar parecía mucho mejor, pero las propiedades mixtas con atributos y no funciona si se selecciona, de-seleccione a continuación, tratar de seleccionar de nuevo, ya que pone al selecto en un estado inutilizable

he encontrado la respuesta correcta para mí fue la siguiente

$("select[multiple] option").mousedown(function() { 
     if ($(this).prop("selected")) 
      $(this).prop("selected", false); 
     else 
      $(this).prop("selected", true); 
     return false; }); 

espero que esto ayuda a los demás;)

Answer 7

Javascript (jQuery sin):

var select = document.getElementById('mysel'); 
select.addEventListener('mousedown', function(e){ 
    var opt = e.target; 
    if (opt.selected){ 
     opt.removeAttribute('selected'); 
     opt.selected = false; 
    } else { 
     opt.setAttribute('selected', ''); 
     opt.selected = true; 
    } 
    e.preventDefault(); 
}); 

Veo que la mayoría de las respuestas anteriores vinculan el evento con la opción en lugar de seleccionar. Si mi selección tiene 1000 opciones, se vincularán 1000 eventos, ¿afectará el rendimiento?

Debido a esto, también decido no vincular mi evento en la opción.