Question

I am using a jQuery multiselect dropdown in ASP.NET I need to get all the selected values, but I am getting only the last selected value from the dropdownlist on the server side after postback.

Script:

<script type="text/javascript">
    $(document).ready(function () {
        $('.department).multiselect({
            show: ["bounce", 5], hide: ["blind", 1],
            close: function () {
                debugger;
                var values = new Array();
                $(this).multiselect("getChecked").each(function (index, item) {
                     values.push($(item).val());
                });
                $("input[id*=selectedValues]").val(values.join(","));
                document.getElementById("<%=hdnDepartment.ClientID %>").value = values;
           }
       })
      .multiselectfilter();
    });
</script>
<asp:HiddenField ID="hdnDepartment" runat="server"></asp:HiddenField>
<asp:HiddenField ID="hdnEmployee" runat="server" />
<asp:DropDownList ID="ddlDepartment" runat="server" Width="150px" CssClass="department" onselectedindexchanged="ddlDepartment_SelectedIndexChanged" AutoPostBack="True">
</asp:DropDownList>

Answer 1

Try joining the values and then writing it to a hidden field..

$('[id*=hdnDepartment]").val(values.join()) ;

        //OR 
document.getElementById("<%=hdnDepartment.ClientID %>").value = values.join();

Also looks like you are losing the vent once the postback occurs. So you need to reattach it once the postback is done .. Try this.

<script type="text/javascript">
    $(document).ready(function () {
        PostBack();

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostBack);
    });

    function PostBack(){
        $('.department).multiselect({
            show: ["bounce", 5], hide: ["blind", 1],
            close: function () {
                debugger;
                var values = new Array();
                $(this).multiselect("getChecked").each(function (index, item) {
                     values.push($(item).val());
                });
                $("input[id*=selectedValues]").val(values.join(","));
                document.getElementById("<%=hdnDepartment.ClientID %>").value = values;
           }
       })
      .multiselectfilter();
    }
</script>