Question

I am using the JQuery UI Multiselect plugin to use dropdownlist with multiselect items, and I need help to bing the selected items saved in a database back to the multiselect dropdown.

Example:

Javascript code on page load:

$("#<%=ddlCountry.ClientID%>").multiselect({
            checkAllText: "All",
            uncheckAllText: "Clear",
        noneSelectedText: "Select a country",
        selectedText: "# item(s) selected",
        close: function (event, ui) {
            var values = $("#<%=ddlCountry.ClientID%>").val();
            var array_of_checked_values = $("#<%=ddlCountry.ClientID%>").multiselect("getChecked").map(function () {
                return this.value;
            }).get();
            document.getElementById("<%=txtHidDataCountry.ClientID%>").value = array_of_checked_values;
        }
    });

DropDownList ASPX code:

<div id="dvPais" style="display:none">
   <asp:DropDownList ID="ddlCountry" runat="server">
    </asp:DropDownList>
    <input type="hidden" id="txtHidDataCountry" runat="server" />
</div>

On complete submit after select 3 Countries, i have it values like “1,2,3”. When i load the page again, i need to select from the dropdownlist the items 1,2,3. How can i do that?

Answer 1

just giving the solution i found:

$("#<%=ddlTeste.ClientID%>").multiselect({
        checkAllText: "All",
        uncheckAllText: "Clear",
    noneSelectedText: "Select a country",
    selectedText: "# item(s) selected",
    close: function (event, ui) {
        var values = $("#<%=ddlTeste.ClientID%>").val();
        var array_of_checked_values = $("#<%=ddlTeste.ClientID%>").multiselect("getChecked").map(function () {
            return this.value;
        }).get();
        document.getElementById("<%=txtHidDataTeste.ClientID%>").value = array_of_checked_values;
    }
});
var s = $("#<%=ddlTeste.ClientID%>").multiselect();
s.val(['1', '2','5']);
$("#<%=ddlTeste.ClientID%>").multiselect('refresh');

ASPX code:

<asp:DropDownList ID="ddlTeste" runat="server" multiple>
    <asp:ListItem Value="1">Valor 1</asp:ListItem>
    <asp:ListItem Value="2">Valor 2</asp:ListItem>
    <asp:ListItem Value="3">Valor 3</asp:ListItem>
    <asp:ListItem Value="4">Valor 4</asp:ListItem>
    <asp:ListItem Value="5">Valor 5</asp:ListItem>
</asp:DropDownList>

Enjoy 🙂