多个选择框并将值作为 url 参数发送

我有这个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>

我想将所选选项的值作为 url 参数发送。使用这个 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'); 

当另一个选择框发生变化时，str 会被替换为另一个：http://jsfiddle.net/eZKUU/

如何在不替换的情况下将值发送到 url？

提前致谢

你的代码几乎是正确的。唯一的一个错误是您将更改后的选择名称存储在变量 id 中，然后在字符串创建中使用它。这应该可以正常工作：

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

简单的优化始终是一个很好的做法:)

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