5

Below is my $.ajax call, how do I put a selects (multiple) selected values in the data section?

$.ajax({
    type: "post",
    url: "http://myServer" ,
    dataType: "text",
    data: {
        'service' : 'myService',
        'program' : 'myProgram',
        'start' : start,
        'end' : end ,
        },
    success: function(request) {
      result.innerHTML = request ;
    }   // End success
  }); // End ajax method

EDIT I should have included that I understand how to loop through the selects selected options with this code:

$('#userid option').each(function(i) {
 if (this.selected == true) {

but how do I fit that into my data: section?

3 Answers 3

5

how about using an array?

data: {
    ...
    'select' : ['value1', 'value2', 'value3'],
    ...
},

edit: ah sorry, here's the code, a few caveats:

'select' : $('#myselectbox').serializeArray(),

in order for serializeArray() to work though, all form elements must have a name attribute. the value of 'select' above will be an array of objects containing the name and values of the selected elements.

'select' : [
    { 'name' : 'box', 'value' : 1 },
    { 'name' : 'box', 'value' : 2 }
],

the select box to produce the above result would be:

<select multiple="true" name="box" id="myselectbox">
   <option value="1" name="option1" selected="selected">One</option>
   <option value="2" name="option2" selected="selected">Two</option>
   <option value="3" name="option3">Three</option>
</select>
2
  • You probably also want the selector $(":selected #selectbox") where "#selectbox" is your select tag
    – Sugendran
    Oct 12, 2008 at 4:02
  • when I read the documentation for $.ajax...specifically data:, I got your answer of using an array for 'select'...jQuery serializes parms entered as an array..so you get &select=parm1&select=parm2&select=parm3, etc. thanks Oct 12, 2008 at 23:24
4

Thanks to the answer from @Owen, I got this code to work.

For a select box with an id="mySelect" multiple="true"

    var mySelections = [];
    $('#mySelect option').each(function(i) {
        if (this.selected == true) {
            mySelections.push(this.value);
        }
    });


    $.ajax({
      type: "post",
      url: "http://myServer" ,
      dataType: "text",
      data: {
        'service' : 'myService',
        'program' : 'myProgram',
        'selected' : mySelections
        },
      success: function(request) {
        result.innerHTML = request ;
      }
    }); // End ajax method
1
  • ah glad you got it to work :) just a note, serialize() returns the values as &select=param etc... while serializeArray() places it in the structure i detailed above. cheers.
    – Owen
    Oct 13, 2008 at 0:10
2

The correct way to represent a collection of multiple options selected is to use an array, by naming the SELECT tag with a [] suffix.
The problem is that it is not correctly handled by the jQuery method serialize().
For a SELECT like this, infact:

<select name="a[]">
    <option value="five">5</option>
    <option value="six">6</option>
    <option value="seven">7</option>
</select>

serialize sends this array: a[]=0&a[]=1&a[]=2 received by PHP this way:

[a] => Array
    (
        [0] => 0
        [1] => 1
        [2] => 2
    )

where real values are lost.

1
  • 1
    Why would you assume that this is a PHP question? Other languages know what to do with an array via POST
    – Ryley
    Dec 1, 2011 at 22:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.