Question

我有这个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 parameteres发送。有了这个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？

提前致谢

Answer 1

您的代码几乎正确。唯一的一个错误是您在变量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);
});

Answer 2

您应该根据ID分别捕获所选框的值。我建议像这样使用两个不同的字符串：

$("#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');

您目前的方式，它只是假设所有选定的选项都是同一个选择框的一部分，并连接到字符串的末尾。如果您为选择框保留两个单独的字符串，则可以在需要通过查看str和str2的值来发送网址时将它们合并。

您可能需要对此进行一些调整以使您的项目有意义，但总体思路应该保持不变。

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

修改：

请改用：

$("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');

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

2 个答案: