Put the options of an input select into a variable

Question

Put the options of an input select into a variable

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Good evening.

Is it possible in a select multiple to save the chosen options in a variable and keep the options chosen?

Example:

<form class="form-inline">
<select id="opcoes" multiple name=opcoes[] >
        <option value="1">Option1</option>
        <option value="2">Option2</option>
        <option value="3">Option3</option>
    </select>
      <button type="submit" class="btn btn-default">Enviar</button>

</form>

If yes, how can I recover it and reuse it at the same select?

javascript jquery

asked by anonymous 04.04.2017 / 23:54

3 answers

CSS is not being loaded in PhP code 2 different forms with select field

score 2 · Answer 1

So, <select multiple /> has an attribute called selectedOptions that returns the <option /> chosen. So just go through them in the event onChange same. With pure Javascript looks like this:

var selecionadas = [];
var opcoes = document.querySelector('#opcoes');
opcoes.addEventListener('change',    function(ev){
   var selectedOptions = ev.target.selectedOptions;
   selecionadas = [];
   for (var i = 0; i < selectedOptions.length; i++){
      selecionadas.push(selectedOptions[i].value);
   }
   console.log(selecionadas);
});

<form class="form-inline">
<select id="opcoes" multiple name=opcoes[] >
        <option value="1">Option1</option>
        <option value="2">Option2</option>
        <option value="3">Option3</option>
    </select>
      <button type="submit" class="btn btn-default">Enviar</button>

</form>

score 0 · Answer 2

It's possible, yes, even using Jquery, there are several ways, if I'm not mistaken you can bind an event for example: "onClick" in the options and then when the user clicks you perform a function that adds or removes this value in the array, in case the value of the option you passing the option as argument could take like this: $(option).val(); to pass the option as argument you can do so

<option value="1" onClick="adicionarNoArray(this)">Option1</option>

I'm sorry for the "If I'm not mistaken", I have not jQuery for some time, but I'll even test it and then post a comment here saying whether it worked or not.

EDIT

<html>
        <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head><body><selectid="select" multiple>
                        <option value="1" onClick="adicionarArray(this)">Option1</option>
                        <option value="2" onClick="adicionarArray(this)">Option1</option>
                        <option value="3" onClick="adicionarArray(this)">Option1</option>
                </select>

        <script>
                var valores = [];
                function adicionarArray(option)
                {
                        var index = valores.indexOf($(option).val());
                        if(index != -1)
                        {
                                valores.splice(index, 1);
                        }
                        else
                        {
                                valores.push($(option).val());
                        }
                                console.log(valores);
                }
        </script>
        <body>
</html>

This should solve your problem. It may not be the best way to do it, and another may come with a better response, however you can then put the values as they are selected in an array and work with the values.

score 0 · Answer 3

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><title>Resposta</title></head><body><selectid="opcoes" multiple name="opcoes">
    <option value="1" class="selecionar">Option1</option>
    <option value="2" class="selecionar">Option2</option>
    <option value="3" class="selecionar">Option3</option>
  </select>

</body>

<script>
  opcoes = []
  $(".selecionar").click(function(e){
    $('#opcoes :selected').each(function(i, selecionado){
      if($.inArray(selecionado,opcoes) == -1){
        opcoes.push(selecionado);
      }else{
        opcoes.splice(i,1);
      }
    });
    console.log(opcoes);
  });
</script>
</html>