多選框，併發送值作爲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');