How to concatenate into a string what was selected in a select Multiple

Question

Hello. I have the following code:

<select id="idselect" class="ui-corner-all ui-widget-content" multiple="multiple" name="idPosto" style="padding: 3px 4px;">

<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>

</select>

I need every click the customer makes on an option to href of the link the "idselect[]"+valorclicado.

<a href="selecionados.php?precisoqueconcateneaqui"></a>

Assuming the client selects option 2 and 3 the link it would form:

 meusite.com/selecionados.php?idselect[]=2&idselect[]=3

I prefer it to be with pure javascript, but if you know some way with jQuery it will also help a lot.

Answer 1

I used the event onchange from select to change the URL every time the user clicks on some value, then runs a for looking for options selected and concateno in the string. (No problem the last &)

window.onload = function() {
  document.getElementById('idselect').addEventListener("change", 
           function () {
                 var urlTexto = "selecionados.php?";
                 var options = this.options;
                 var opt;

                 for (var i=0, iLen=options.length; i<iLen; i++) {
                   opt = options[i];

                   if (opt.selected) {
                     urlTexto += this.id + "[]=" + opt.value + "&";
                   }
                 }
    
                 document.getElementById('linkdinamico').href = urlTexto;
                 console.log(urlTexto);
           });  
}

<select id="idselect" class="ui-corner-all ui-widget-content" multiple="multiple" name="idPosto" style="padding: 3px 4px;">

  <option value="1" label="Valor 1"></option>
  <option value="2" label="Valor 2"></option>
  <option value="3" label="Valor 3"></option>
  <option value="4" label="Valor 4"></option>

</select>

<a id="linkdinamico" href="selecionados.php?"></a>

Answer 2

In answer to the question you can do so:

function changeHref(e) {
    var options = [].map.call(this.selectedOptions, function(el){ // capturar as opções escolhidas
        return el;
    });
    var root = link.href.split('?')[0]; // ir buscar o caminho do url
    var queryString = options.map(function (opt) {  // gerar a queryString
        return 'idselect[]=' + opt.value;
    }).join('&');
    link.href = [root, '?', queryString].join('');  // montar o href e aplicar
}

var select = document.getElementById('idselect');
var link = document.getElementById('selectTarget'); // aqui dei um ID ao <a>, podes fazer assim ou de outra maneira se quiseres
select.addEventListener('click', changeHref);

jsFiddle: http://jsfiddle.net/jnu3xkwz/

But it seems to me you could do that too with just one <form>, no need for Javascript. When you press the send button the browser itself is in charge of sending the chosen options to the server.

Then I’d be like this:

<form action="/echo/html/">
    <select id="idselect" class="ui-corner-all ui-widget-content" multiple="multiple" name="idselect[]">
        <option value="1">Opção 1</option>
        <option value="2">Opção 2</option>
        <option value="3">Opção 3</option>
        <option value="4">Opção 4</option>
    </select>
    <p>
        <button type="submit">Enviar</button>
    </p>
</form>

Cleaner, without any Javascript.

jsFiddle: http://jsfiddle.net/jnu3xkwz/1/

Note: In the examples I put CSS outside of HTML, so it’s easier to keep code.