jQuery select values as list

Question

I am building a calendar within my struts2 application using fullcalendar. But... I am running into a bit of a problem. We have built an advanced search that allows us to filter the calendar events server side and return a result list. I am able to get most everything to work correctly with the exception of a select with multiple and I think it is because I am using my jquery wrong.

My ajaxLocationCalendar.action is expecting to see a list of locations and not a string with multiple locations.

Within my code I have a <select id="locationsSelect" multiple="multiple"> which has several options.

My fullcalendar setup looks like the following:

events: {
  url: 'ajaxLocationCalendar.action',
  data: {
    'scheduleableCriteria.approvalStatus': function() {
      return $('#approvalStatusSelect').val();
    },
    'scheduleableCriteria.locations': function() {
      return $('#locationsSelect').val();
    }
  }
}

The #approvalStatusSelect works perfectly because there are 4 valid options and it is a single select. However I am having problems with the #locationSelect.

If I select nothing I end up sending "null" which is not a match to anything. If I select exactly one option I get a valid result because it is wrapped up correctly. If I try to send two selected I end up sending something like "Apartment,Building+3".

Is there a function other than .val() that would allow me to send a list rather than what I am getting now?

Any help appreciated, if you need clarification put it in the comments and I will try to clarify more.

You probably want to [take a look at map()](http://stackoverflow.com/a/5794756/1654265) — Andrea Ligios, Oct 24 '13 at 15:21
@AndreaLigios unfortunately I am not quite sure how that can solve my problem :-( True I can build a key value pair that way but... Its not quite right. $.map() I end up with something like the following: `0[name]: "scheduableCriteria.locations"` `0[value]: "Apartment"` `1[name]: "scheduableCriteria.locations"` `1[value]: "Gym"` But what I need is `scheduableCriteria.locations : Apartment` `scheduableCriteria.locations : Gym` — buzzsawddog, Oct 24 '13 at 17:12
Struts translates multiple of the same Name into a `List` and each instance as a an entry. Using the map I would have to iterate over the items within my `Java action` and do some funky behind the scenes stuff. — buzzsawddog, Oct 24 '13 at 17:14
Just declare your `scheduleableCriteria.locations` as a list. — Aleksandr M, Oct 24 '13 at 18:03
@AleksandrM within my action I have a `ScheduleableCritera` and within that I have `private List locations;` So... it is already a `List`. But, as I said in the question multiple options being selected results in a string similar to this: `"scheduableCriteria.locations":"Apartment, Gym"` rather than two entry's `scheduableCriteria.locations : Apartment` `scheduableCriteria.locations : Gym` — buzzsawddog, Oct 24 '13 at 19:06

score 0 · Answer 1 · edited May 23 '17 at 12:21

'scheduleableCriteria.locations': function() {
      return $('#locationsSelect').val();
    }

This will only return a String - showing multiple values as comma-separated list. So in the action they actually end up being a single-string.

Put all the fields to submit in a form-tag and then use serialization as below

var submit_data = $('form').serialize();

Your code will then change to appear something as :

events: {
  url: 'ajaxLocationCalendar.action',
  data: submit_data        
}

This way the multi-select will be submitted as an array instead of a string.

Solution 2 :

To create a custom-function, to parse the select and return you an array of all selected values

Complete Solution Here

Sadly this did not work due to the way data was sent over. I do not remember the particulars of what went wrong but it seems that using the .serialize() ended up doing a k,v with only one character per key, value. Thank you for your help attempt. — buzzsawddog, Nov 12 '13 at 17:02

score 0 · Accepted Answer · answered Nov 12 '13 at 17:00

The following ended up using the following as .serialize() and .seralizeArray() did not work properly.

data: function() {
  var data = {};
  data['scheduleableCriteria.approvalStatus'] = $("#approvalStatusSelect").val();
  var locations = $("#locationsSelect").val();
  if (locations) {
    $.each(locations, function(i, location) {
      data['scheduleableCriteria.locations[' + i + ']'] = location;
    });
  }
  return data;
}

jQuery select values as list

2 Answers2