jQuery MultiSelect .val()与“getChecked”不一致

时间:2013-03-31 23:12:16

标签: javascript jquery multi-select

我正在使用Eric Hynds的MultiSelect控件: http://www.erichynds.com/blog/jquery-ui-multiselect-widget

控件似乎工作正常,除非我尝试获取值,.val()方法不会给我所有选中的项目 - 它只给我一个选定列表中的单个项目。

要获得我需要使用更长时间形式的所有项目:  var values = $(“#retailersSelect”)。multiselect(“getChecked”)。map(function(){return this.value;})。get();

知道为什么.val()不会给我一系列结果吗?

完整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>

1 个答案:

答案 0 :(得分:2)

您忘记了标记中非常重要的内容。您没有将select设置为实际接受多个值。

<select multiple id="retailersSelect">