how to force asp.net listbox to hold the selected values after confirmation box's cancel event?

Question

I have below asp.net Listbox which has been decorated with sumoselect.

After selecting an item in dropdown if user deselects the item (none of the item is selected) then user will be prompted a javascript confirmation box and if user clicks on Cancel button of that, then dropdown will continue to hold the values. Below is my code.

<td class="ievent" style="width:22%; padding-bottom:10px; padding-right:30px;padding-left:10px;">
         <asp:ListBox ID="ListBoxSol" runat="server" SelectionMode="Multiple"  CssClass="textbox"  Height="22px" Font-Size="Small" Width="230px">
            </asp:ListBox>           
         </td>

if (lastselectedItemIndex == -1) {
                    var dropselvalue = sessionStorage.getItem("items");
                    var ans = confirm("If all Internal Solution are de-selected than Solution Revenue value will be saved as 0. Do you want to de-select all?");
                    if (ans == true) {
                        $('#LabelSolRev').hide();
                        $('#TextBoxSolRev').hide();
                    }
                    else {
                        event.preventDefault();
                        //$("#ListBoxSol option").find('AI Solutions').attr("selected", true);
                        //$('#ListBoxSol option').(":checked");
                        $("#ListBoxSol option").each(function () {
                            if ($(this).html() == "AI Solutions") {
                                $(this).prop("selected", true);
                                //$(this).checked(true);
                                $(this).removeClass("opt");
                                $(this).addClass("selected opt");
                                $(this).trigger("click");
                                return false;
                            }
                        });

                    }
                }

But in my case multiselect dropdown is unable to hold the values after deselect by using the code given. Can anyone please suggest how to handle this scenario?

Junaid · Answer 1 · 2019-08-28T10:09:19.480

If I have understood your question right, you want to select multiple options from asp:ListBox control and upon deselecting all of the options you want to keep their record so that you can re-select them in some case.

First, the asp:ListBox control is not selected like this: $("#ListBoxSol option").

As this control runs at the server, some additional information is prepended to it. This will result in its id becoming something like: #MainContent_ListBoxSol.

To select the asp:ListBox control you need to replace $("#ListBoxSol option") with $("#<%= ListBoxSol.ClientID %> option"). You can read more about selecting asp.net controls in jQuery here.

Secondly, to retain the selected values you can store them in an array, say 'values'.

var values = [];

$("#<%= ListBoxSol.ClientID %> option:selected").each(function (i, option) {
        values[i] = option;
});

Later you can traverse the array and re-select the options.

$.each(values, function (index, option) {
   $("#<%= ListBoxSol.ClientID %> option[value='" + option.value + "']").prop('selected', true);
});

Hope it helps.

how to force asp.net listbox to hold the selected values after confirmation box's cancel event?

1 Answers1