locked
Chosen plugin problem RRS feed

  • Question

  • User31164289 posted

    I use Chosen JQuery plugin in my webapp (http://harvesthq.github.io/chosen/). It's great.

    But now I want to use it with "Multiple" configuration so user can add multiple value to field filter.

    This is my code

    <asp:Label runat="server" ID="Label1" Text="Regione:"></asp:Label>                    
                                <asp:DropDownList runat="server" ID="ddlRegione" DataSourceID="odsRegione" DataTextField="Regione" DataValueField="Id"  multiple="" CssClass="chzn-select medium-select select" data-placeholder="Selezionare..." AppendDataBoundItems="true">
                                  <asp:ListItem Text="" Value="-1"></asp:ListItem>
                                </asp:DropDownList>
                                <asp:ObjectDataSource ID="odsRegione" runat="server" SelectMethod="LoadAllDsWrapper" TypeName="BusinessLogic.BLL.Regione">                                
                                </asp:ObjectDataSource>

    It work but when user press button to apply filter causing postback dropdown reset value and lost value selected.

    How I can solve?

    Saturday, September 26, 2015 3:15 AM

Answers

  • User61956409 posted

    Hi clembo67,

    You could try to store selected items in a HiddenField control, then you could retrieve selected values from HiddenField and set selected value for your Multiple Select when DOM is ready.

    $(function () {
        var selectedvalues = $("#YourHiddenField").val();
        if (selectedvalues != "") {
            //set selected values for Multiple Select based on selectedvalues
        }
    })
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 27, 2015 11:19 PM
  • User-1667135504 posted

    I tried this in one of my project.

    Using <asp:dropdownlist> with chosen for multiple value will  not works. Fro this you need to use HTML Select Tag.  Your code would be as written below

    HTML markup:

    <select runat="server" id="ddlRegione" class="slct_ddlRegione" multiple>
    </select>
    <asp:HiddenField ID="HiddenField1" runat="server" />

     

    jQuery:

    $(document).ready(funtion(){
    	
        initChoosen();
    
        function initChoosen() {
            $(".slct_ddlRegione").chosen().change(function () {
    		$("#HiddenField1").val($(this).val());
    	});
        }
    });

    Note: Here multiple selected values are getting set into your hidden field, which you able to fetch from code-behind 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 28, 2015 5:40 AM

All replies

  • User61956409 posted

    Hi clembo67,

    You could try to store selected items in a HiddenField control, then you could retrieve selected values from HiddenField and set selected value for your Multiple Select when DOM is ready.

    $(function () {
        var selectedvalues = $("#YourHiddenField").val();
        if (selectedvalues != "") {
            //set selected values for Multiple Select based on selectedvalues
        }
    })
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 27, 2015 11:19 PM
  • User-1667135504 posted

    I tried this in one of my project.

    Using <asp:dropdownlist> with chosen for multiple value will  not works. Fro this you need to use HTML Select Tag.  Your code would be as written below

    HTML markup:

    <select runat="server" id="ddlRegione" class="slct_ddlRegione" multiple>
    </select>
    <asp:HiddenField ID="HiddenField1" runat="server" />

     

    jQuery:

    $(document).ready(funtion(){
    	
        initChoosen();
    
        function initChoosen() {
            $(".slct_ddlRegione").chosen().change(function () {
    		$("#HiddenField1").val($(this).val());
    	});
        }
    });

    Note: Here multiple selected values are getting set into your hidden field, which you able to fetch from code-behind 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 28, 2015 5:40 AM