.val() not working with jquery multiselect plugin

Question

I looked at several other questions regarding this topic, but none of them helped. I am using this plugin and my select is defined like this:

<select name="test" multiple="multiple" id="test" style="width:150px">
    <option value="{{ cm }}">{{ cm }}</option>
    //several other fields
</select>

When the select field is changed, I want to print all selected fields with

var values = $('#test').val();
alert(values);

However, I only get an empty string... I am really sure that I don't have any syntax errors and virtually every source says that .val() can be used with a multiselect, what am I doing wrong?

Use `console.log` because `val()` in multi-select give in array format. https://stackoverflow.com/questions/2543322/get-value-of-multiselect-box-using-jquery-or-pure-js — Avinash Dalvi, Jul 28 '20 at 11:31
When and how are you executing this JS code? Please, [edit] your question and provide a [mre]. See [How to create Stack Snippets](https://meta.stackoverflow.com/q/358992/4642212). — Sebastian Simon, Jul 28 '20 at 11:32
_“and virtually every source says that .val() can be used with a multiselect”_ - well you don’t _have_ an actual `select` element any more, the plugin has completely _replaced_ that, with a custom HTML structure of lists and checkboxes … — CBroe, Jul 28 '20 at 11:34

score 3 · Accepted Answer · answered Jul 28 '20 at 11:34

Plugin you have mentioned doesn't use native select but list of input. As you can see in example author used this method to get values:

$("#submit_data").click(function( e ) {
   var fields = $( ":input" ).serializeArray(); // use your selector here, like #test input
   $( "#results" ).empty().append( JSON.stringify( fields , null, "\t") );
});

.val() not working with jquery multiselect plugin

1 Answers1