CODEWITHSUNDEEP
jquery
TheNone
TheNone

Reputation: 5802

Multiple select box and send values as url parameteres

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

Upvotes: 1

Views: 2934

Answers (2)

Mateusz W
Mateusz W

Reputation: 2031

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);
});

Upvotes: 4

Rondel
Rondel

Reputation: 4951

You should really catch the values of selected boxes separately based on the ID. I would suggest using two different strings altogether like this:

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

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

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

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

The way you currently do it, it just assumes that all the selected options are a part of the same select box and concatenates onto the end of the string. If you maintain two seperate strings for the select boxes, you can combine them when it is time to send the URLs by looking at the values of str and str2.

You may have to adapt this a little to make sense for your project but the general idea should remain the same.

http://jsfiddle.net/rawsmell/eZKUU/1/

EDIT:

Use this instead:

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

Upvotes: 1

Related Questions