Question

I have this html:

<select name="garden" multiple="multiple" id="garden">
  <option value="1">Flowers</option>
  <option value="2">Shrubs</option>
  <option value="6">Trees</option>
  <option value="3">Bushes</option>
  <option value="4">Grass</option>
  <option value="5">Dirt</option>
</select>
<select name="po" multiple="multiple" id="po">
  <option value="1">po1</option>
  <option value="2">po2</option>
  <option value="6">po3</option>
  <option value="3">po4</option>
  <option value="4">po5</option>
  <option value="5">po6</option>
</select>
<div></div>

I want to send values of selected options as url parameteres. With this javascript:

$("select").change(function () { 
    var id = $(this).attr('name');
    var str = "";
    $("select option:selected").each(function () {

       str += "&"+id+"="+ $(this).attr('value');             
       });
      $("div").text(str);
    })
    .trigger('change'); 

When the other select box changes, str is replaced with another:
http://jsfiddle.net/eZKUU/

How can I send values to url without replacing?

Thanks in advance

Answer 1

You have almost correct code. The only one bug is that you are storing changed select name in variable id, and then using it in string creation. This should work correctly:

$("select").change(function () { 
    var str = "";
    $("select option:selected").each(function () {
        str += '&' + $(this).parent().attr('name') + "="+ $(this).attr('value');   
    });
    $("div").text(str);
});

And simple optimization is always a good practice 🙂

$("select").change(function () { 
    var str = "";
    $("select option:selected").each(function () {
        var option = $(this);
        str += '&' + option.attr('name') + "="+ option.attr('value');   
    });
    $("div").text(str);
});