jQuery MultiSelect .val() inconsistent with "getChecked"

Question

I am using Eric Hynds' MultiSelect control: http://www.erichynds.com/blog/jquery-ui-multiselect-widget

The control seems to work OK, except when I try and get the values, the .val() method doesn't give me all the checked items - it only ever gives me a single item from the selected list.

To get all the items I need to use the much longer form of: var values = $("#retailersSelect").multiselect("getChecked").map(function () {return this.value;}).get();

Any idea why .val() wouldn't give me an array of results?

Full HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Test Page</title>
    <link href="/css/redmond/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="/css/jquery.multiselect.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.10.2.custom.js"></script>
    <script type="text/javascript" src="/js/jquery.multiselect.js"></script>
</head>
<body>
    <form action="test.htm" method="post">
        <div id="main">

            <select id="retailersSelect">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>

            <br />
            <input type="button" id="ExecuteReportButton" value="Butt" />

            <script type="text/javascript">
                $(function () {

                    //set up the multi selects
                    $("#retailersSelect").multiselect({
                        selectedList: 3, // 0-based index
                        header: false,
                        noneSelectedText: "Select a retailer"
                    });

                    $("#ExecuteReportButton").click(function () {
                        var values = $("#retailersSelect").multiselect("getChecked").map(function () {
                            return this.value;
                        }).get();
                        alert(values); //GIVES ME THE FULL ARRAY - NICE!

                        var values2 = $("#retailersSelect").val();
                        alert(values2); //ONLY GIVES ME A SINGLE ITEM - :(

                        return false;
                    });
                })
            </script>
        </div>
    </form>
</body>
</html>

Alexander Alexander · Accepted Answer · 2013-03-31T23:26:06

You forgot something very important in your markup. You aren't setting your select to actually accept multiple values.

<select multiple id="retailersSelect">

jQuery MultiSelect .val() inconsistent with "getChecked"

1 Answers