disabled - Javascript/jQuery: Establecer valores(selección) en un Seleccionar múltiple

jquery prop

Question

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>

Cargué 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!!!

Answer 1

Solución Pure JavaScript ES5

Por algún motivo, ¿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>

Answer 2

Solución Pure JavaScript ES6

• querySelectorAll cada opción con una función querySelectorAll y divida la cadena de values .
• Use Array#forEach para iterar sobre cada elemento de la matriz de values .
• Use Array#find para encontrar la opción que coincida con el valor dado.
• Establezca su atributo selected en true .

Nota : Array#from transforma un objeto similar a una matriz en una matriz y luego puede usar las funciones Array.prototype en ella, como find o map .

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>

Answer 3

Básicamente haz un values.split ('','') y luego recorre el conjunto resultante y configura el Select.

Answer 4

Itere a través del ciclo usando 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/

Answer 5

Solo 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();

Answer 6

en jQuery:

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

o en javascript puro:

document.getElementById(''strings'').value = ["Test", "Prof", "Off"];

Answer 7

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