Question

I have list of groups:

 <select multiple="multiple"  name="groups[]"  id="groups[]" class="myclass">

<option value="1">Employee</option>        
<option value="2">Suppliers</option>
<option value="3">Customers</option>

 </select>

I am using the below code to pass the groups to the ajax url but ONLY one group is passed!!

<Script>
    groups=document.getElementById("groups[]").options.item(addIndex).value;

    xmlHttp.open("POST","?action=ajaxcontac&groups="+ groups,true);
</Script>

How Can I pass more than one group to the url?

Thanks

Answer 1

var opts = document.querySelectorAll("#groups\\[\\] option"),

    groups = [].map.call(opts, function(option) {
        if (option.selected) {
            return "groups[]=" + option.value;
        }
    }).filter(Boolean).join("&");


xmlHttp.open("POST", "?action=ajaxcontac&" + groups, true);

Demo

http://jsfiddle.net/XJLBA/1/