多重选择框并将值作为url参数发送 [英] Multiple select box and send values as url parameteres

问题描述

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

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

当另一个选择框更改时，str被另一个替换: http://jsfiddle.net/eZKUU/

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

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

How can I send values to url without replacing?

预先感谢

推荐答案

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

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

这篇关于多重选择框并将值作为url参数发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！