Javascript / jQuery: establecer valores (selección) en una selección múltiple

100

Tengo una selección múltiple:

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

Carga datos de mi base de datos. Entonces tengo una cadena como esta:

var values="Test,Prof,Off";

¿Cómo puedo establecer estos valores en la selección múltiple? Ya intenté cambiar la cadena en una matriz y ponerla como valor en el múltiplo, ¡pero no funciona ...! ¿Puede alguien ayudarme con esto? ¡¡¡GRACIAS!!!

Zwen2012
fuente

Respuestas:

133

Itere a través del bucle utilizando el valor en un selector dinámico que utiliza el selector de atributos.

var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
    $("#strings option[value='" + e + "']").prop("selected", true);
});

Ejemplo de trabajo http://jsfiddle.net/McddQ/1/

Kevin Bowersox
fuente
1
Eso es genial, pero ¿cómo se dice que los valores seleccionados deben seleccionarse en la "selección múltiple" con el id = string?
Zwen2012
@ user1824136 Excelente, ¡Me alegro de haber podido ayudar a alguien esta mañana!
Kevin Bowersox
1
Si vamos a depender de jQuery de todos modos, preferiremos ŁukaszW.pl $('#strings').val(values.split(',')). Sin jQuery, el antiguo Javascript simple de ŁukaszW.pl document.getElementById('strings').value = ["Test", "Prof", "Off"]también se logra en una sola línea
KyleMit
109

en jQuery:

$("#strings").val(["Test", "Prof", "Off"]);

o en JavaScript puro:

var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"];
for (var i = 0; i < element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}

jQuery hace una abstracción significativa aquí.

ŁukaszW.pl
fuente
1
Esto funcionó perfecto para mí y mis selecciones 'elegidas' ... tengo que agregar todos los valores a la vez (como dice arriba)
Todd Vance
4
Hmm, el javascript puro no me funciona en Chrome / mac o FF / mac. No tiene ningún efecto sobre lo que realmente está seleccionado, al menos lo que aparece seleccionado visualmente en el navegador.
Bill Keese
3
Está funcionando cuando paso una cadena, pero no cuando paso una matriz.
Ravi G
Tener el mismo problema; esto solo funciona con valores de cadena, no matrices (usando JS simple, no jQuery).
jayp
1
Para aquellos que experimentan problemas con esto, deben asegurarse de activar un evento de 'cambio' después de establecer el valor en JavaScript. Usando jQuery esto sería $ ("# cadenas"). Val (["Prueba", "Prof", "Off"]). Trigger ('cambiar');
Jon Wyatt
20

Simplemente proporcione la función jQuery val con una matriz de valores:

var values = "Test,Prof,Off";
$('#strings').val(values.split(','));

Y para obtener los valores seleccionados en el mismo formato:

values = $('#strings').val();
PostureOfLearning
fuente
8

Solución Pure JavaScript ES6

  • Capture todas las opciones con una querySelectorAllfunción y divida la valuescadena.
  • Úselo Array#forEachpara iterar sobre cada elemento de la valuesmatriz.
  • Use Array#findpara encontrar la opción que coincida con el valor dado.
  • Establezca su selectedatributo en true.

Nota : Array#fromtransforma un objeto similar a una matriz en una matriz y luego puede usar Array.prototypefunciones en él, como buscar o mapa .

var values = "Test,Prof,Off",
    options = Array.from(document.querySelectorAll('#strings option'));

values.split(',').forEach(function(v) {
  options.find(c => c.value == v).selected = true;
});
<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

amable usuario
fuente
2

Básicamente, haz un values.split(',')y luego recorre la matriz resultante y establece la opción Seleccionar.

kashipai
fuente
1

Solución Pure JavaScript ES5

¿Por alguna razón no usas jQuery ni ES6? Esto podría ayudarte:

var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('strings');

multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;
for (var i = 0; i < multiLen; i++) {
  if (splitValues.indexOf(multi.options[i].value) >= 0) {
    multi.options[i].selected = true;
  }
}
<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On" selected>On</option>
</select>

Mariano Desanze
fuente
0
var groups = ["Test", "Prof","Off"];

    $('#fruits option').filter(function() {
      return groups.indexOf($(this).text()) > -1; //Options text exists in array
    }).prop('selected', true); //Set selected
Miembro con
fuente
0

esto es un error en algunas respuestas para reemplazar |

var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);

esta corrección es correcta pero el | Al final, debería verse así \ |

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);
Xavier Moreno
fuente