Html: For Select multiple, only one value is submitted but .val() returns array of two values

Question

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?

Answer 1

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