如何使用來自多個選擇輸入的JQuery構建List參數？

我需要發佈一個JSON字符串，其中包含來自多個選擇表單的1個或更多值的列表。在我提出的JQuery解決方案中，我得到了列表中選定的所有值，但它們作爲單獨的參數返回。如何使用來自多個選擇輸入的JQuery構建List參數？

$(document).ready(function() { 
    $("#fooForm").submit(function(event) { 
    event.preventDefault();   
    var $form = $(this), 
    loc = $form.find('input[name="location"]').val(), 
    url = $form.attr('action'), 
    keys = $('#people :selected').map(function(){return $(this).val();}).get(); 
    $.post(url, {people:keys, location:loc}, 
     function(data) { 
      $("#result").html(data); 
     } 
    ); 
    }); 
}); 

<form id="fooForm" method="" action="/api/people/location"> 
    <input type="hidden" name="location" value="{{location}}" /> 
    <select id="people" multiple size=4> 
    <option value="{{a.key}}">{{a.name}}</option> 
    <option value="{{b.key}}">{{b.name}}</option> 
    <option value="{{c.key}}">{{c.name}}</option> 
    <option value="{{d.key}}">{{d.name}}</option> 
    </select> 
    <input type="submit" value="Submit" />  
</form>

這將產生以下參數如果說，三個人被選中：

location  91.001,-11.23 
people[] agxzdXBlcmxhcnAtc2ty_foo 
people[] agxzdXBlcmxhcnAtc2ty_spam 
people[] agxzdXBlcmxhcnAtc2ty_eggs

我希望那裏是包含三個鍵值單人蔘數。

UPDATE 這是我想出了最優雅的解決方案：

$(document).ready(function() { 
    $("#fooForm").submit(function(event) { 
    event.preventDefault();   
var dataToBeSent = $("#fooFoorm").serialize(); 
var url = $("#fooForm").attr('action'); 
    $.post(url, dataToBeSent, 
     function(data) { 
      $("#result").html(data); 
     }, "json" 
    ); 
    }); 
}); 

<form id="fooForm" method="" action="/api/people/location"> 
    <input type="hidden" name="location" value="{{location}}" /> 
    <select name="people" multiple size=4> 
    <option value="{{a.key}}">{{a.name}}</option> 
    <option value="{{b.key}}">{{b.name}}</option> 
    <option value="{{c.key}}">{{c.name}}</option> 
    <option value="{{d.key}}">{{d.name}}</option> 
    </select> 
    <input type="submit" value="Submit" />  
</form>

來源

2011-05-12 Will Curran

在參數中發送列表的標準方式是爲列表中的每個項目使用一個參數（然後它是約定將該參數命名爲「無論[]」以指示它是列表）。

此外，你真的應該爲你的SELECT使用一個名稱，而不是一個ID;您不應該在頁面上擁有多個具有相同ID的元素，而名稱實際上是「命名」表單數據的屬性。

一個更簡單的方法來做你想做的事情就是使用jQuery序列化方法。這將讓你做：

keys = $("#fooForm").serialize()

不過，我敢肯定，會做多個參數的事情太多，所以如果你真的必須有一個參數，那麼你堅持做一樣的東西：

keys = "" 
$('#people :selected').each(function(){ 
    keys += $(this).val() + ","; 
}); 
// Strip off the trailing comma if present

來源

2011-05-12 18:28:25 machineghost

序列化更優雅。好的catch - 通過使SELECT成爲一個倍數，它會在DOM中創建多個ID。 – 2011-05-12 19:15:48

也許加入鍵數組用逗號？

來源

2011-05-12 18:17:22 ehynds

如何使用來自多個選擇輸入的JQuery構建List參數？

回答

相關問題