Javascript / jQuery: definir valores (seleção) em uma seleção múltipla

100

Eu tenho uma seleção múltipla:

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

Eu carrego dados do meu banco de dados. Então eu tenho uma string como esta:

var values="Test,Prof,Off";

Como posso definir esses valores na seleção múltipla? Já tentei trocar a string em um array e colocar ela como valor no múltiplo, mas não funciona ...! alguém poderia me ajudar com isso? OBRIGADO!!!

Zwen2012
fonte

Respostas:

133

Faça a iteração no loop usando o valor em um seletor dinâmico que utiliza o seletor de atributo.

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

Exemplo de trabalho http://jsfiddle.net/McddQ/1/

Kevin Bowersox
fonte
1
Legal, mas como se diz que os valores selecionados devem ser selecionados no "multiple select" com a string id =?
Zwen2012
@ user1824136 Excelente, que bom que pude ajudar alguém esta manhã!
Kevin Bowersox
1
Se vamos depender do jQuery de qualquer maneira, prefira muito mais ŁukaszW.pl $('#strings').val(values.split(',')). Sem jQuery, o Plain Old Javascript de ŁukaszW.pl document.getElementById('strings').value = ["Test", "Prof", "Off"]também funciona em uma linha
KyleMit
109

em jQuery:

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

ou em 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 faz abstrações significativas aqui.

ŁukaszW.pl
fonte
1
Isso funcionou perfeitamente para mim e para minhas seleções 'escolhidas' ... tenho que adicionar todos os valores de uma vez (como você disse acima)
Todd Vance
4
Hmm, o javascript puro não está funcionando para mim no Chrome / mac ou FF / mac. Não tem efeito sobre o que está realmente selecionado, pelo menos o que aparece selecionado visualmente no navegador.
Bill Keese,
3
Está funcionando quando estou passando string, mas não quando estou passando array.
Ravi G de
Tendo o mesmo problema; isso só funciona com valores de string, não arrays (usando JS simples, não jQuery).
Jayp
1
Para aqueles que estão tendo problemas com isso, você deve se certificar de acionar um evento de 'mudança' após definir o valor em JavaScript. Usando jQuery, isso seria $ ("# strings"). Val (["Teste", "Prof", "Off"]). Trigger ('alterar');
Jon Wyatt
20

Basta fornecer à função val jQuery uma matriz de valores:

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

E para obter os valores selecionados no mesmo formato:

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

Solução Pure JavaScript ES6

  • Pegue todas as opções com uma querySelectorAllfunção e divida a valuesstring.
  • Use Array#forEachpara iterar sobre cada elemento da valuesmatriz.
  • Use Array#findpara encontrar a opção correspondente ao valor fornecido.
  • Defina seu selectedatributo como true.

Nota : Array#fromtransforma um objeto semelhante a um array em um array e então você pode usar Array.prototypefunções nele, como localizar ou mapear .

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>

usuário gentil
fonte
2

Basicamente, faça um values.split(',')e, em seguida, faça um loop pelo array resultante e defina o Select.

kashipai
fonte
1

Solução Pure JavaScript ES5

Por algum motivo você não usa jQuery nem ES6? Isso pode ajudá-lo:

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
fonte
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
Membro con
fonte
0

este é um erro em algumas respostas para substituir |

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

esta correção está correta, mas o | No final, deve ser assim \ |

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