How to concatenate in a string what was selected in a select multiple

3

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 concatenation in the href of the "idselect[]"+valorclicado link to be clicked by the client.

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

Assuming that the client select option 2 and 3 the link that would form would be this:

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

I prefer it to be pure javascript, but if you know anything about jQuery it will also help a lot.

    
asked by anonymous 01.07.2015 / 01:49

2 answers

3

I used the onchange event of the select to change the URL every time the user clicks on a value, then squeezes a for by looking for options selected and concatenates 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>
    
01.07.2015 / 02:00
2

In response to the question you can do this:

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

But it seems to me that you could only do this with a <form> , without needing JavaScript. When you press the button to send the browser itself, it will send the chosen options to the server.

In this case it would look 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, no JavaScript.

jsFiddle: link

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

    
01.07.2015 / 11:26