多选框，并发送值作为URL parameteres

Question

我有这个网站：

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

当对方选择框的变化，海峡被替换为另一种： http://jsfiddle.net/eZKUU/

如何发送值，而无需更换到网址是什么？

在此先感谢

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的值来发送URL。

您可能需要适应这一点才能使您的项目有意义，但总的想法应该保持不变。

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