When rendering the page, the val() of a multiple select is set with a single value. For example, $("#my_select_box").val(1);
Then the user selects an additional value in the multiple select box.
When the form is submitted, only the newly selected value is submitted and not the previously set one. Whereas while debugging in Firefox, the .val() function returns an array of two values (both the previous one and the newly selected one). Why does this happen?
If you are programming in PHP, the problem lies there. When using multiselect inputs, PHP requires you to have an empty pair of brackets after input name. For example:
<select name="select[]" multiple="multiple">
rather than just
<select name="select" multiple="multiple">
If you can't or won't do this (perhaps you don't have access to the underlying HTML), then you can alternatively capture the POST data like this:
$data_from_post = file_get_contents("php://input");
var_dump($data_from_post);
And you'll see a string like this that you can use:
select=one&select=two&select=three&button=submit
Well, without code we can't be sure. But when you want multiple params to be passed in you have to give a name value of that input the [ ] brackets. Ex. "name[]" so in order for the server to know that there are in fact two values.
Hard to tell what to do without the code.
However, if you want both the option that you marked selected and another that was selected, you could access them as follows:
option[selected="selected"] for the one you set
and
option:selected for the one chosen by the user
So something like this...
$('#submit').click(function(){
var s = $('#my_select_box option[selected="selected"]').val();
var t = $('#my_select_box option:selected').val();
alert("Set: " + s + ", Chosen: " + t);
});
