locked
Dropdownlist with check boxes or multi-select (mvc3/jquery)? RRS feed

  • Question

  • User-1976351061 posted

    QQ: Hi I need (intuitive) functionality that allows a user to select multiple items in a drop down list. Are there any dropdownlists jquery/mvc3/razor that allows for a check box to appear to the left within the list item to achieve this?

    Thanks!

    Tuesday, October 18, 2011 4:43 PM

Answers

  • User-1280676833 posted

    Hi,

    According to your description, I think you want something like checkboxlist. Here is a simple sample. You can refer to it:

            public static string CheckBoxList(this HtmlHelper helper, string name, IEnumerable<SelectListItem> items)
            {
                var output = new StringBuilder();
                output.Append(@"<div class=""checkboxList"">");
    
                foreach (var item in items)
                {
                    output.Append(@"<input type=""checkbox"" name=""");
                    output.Append(name);
                    output.Append("\" value=\"");
                    output.Append(item.Value);
                    output.Append("\"");
                    if (item.Selected)
                        output.Append(@" checked=""chekced""");
                    output.Append(" />");
                    output.Append(item.Text);
                    output.Append("<br />");
                }
                output.Append("</div>");
    
                return output.ToString();
            }

    Hope this helpful

    Regards

    Young Yang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 23, 2011 11:24 PM
  • User-474980206 posted

    there is no browser support for this. you can pick one of the many jquery plugins for this. google and pick the one you like best.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 24, 2011 1:20 AM
  • User-1255412691 posted

    Take a look at Chosen.

    http://harvesthq.github.com/chosen/

    BOb

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 7, 2011 1:13 PM
  • User-1005219520 posted

    My blog Working with the DropDownList Box and jQuery  uses the Chozen DDL

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 7, 2011 1:45 PM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 8, 2011 8:49 PM
  • User-1255412691 posted

    I've got a complete tutorial on DropDownList and LIstBox and a sample using Chosen. Email me if you want a preview.

    See Working with the DropDownList Box and jQuery and My blog Cascading DropDownList in ASP.Net MVC

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 8, 2011 9:03 PM

All replies

  • User-1538508276 posted

    check this http://stackoverflow.com/questions/4872192/checkboxlist-in-mvc3-0

    Tuesday, October 18, 2011 9:44 PM
  • User-1280676833 posted

    Hi,

    According to your description, I think you want something like checkboxlist. Here is a simple sample. You can refer to it:

            public static string CheckBoxList(this HtmlHelper helper, string name, IEnumerable<SelectListItem> items)
            {
                var output = new StringBuilder();
                output.Append(@"<div class=""checkboxList"">");
    
                foreach (var item in items)
                {
                    output.Append(@"<input type=""checkbox"" name=""");
                    output.Append(name);
                    output.Append("\" value=\"");
                    output.Append(item.Value);
                    output.Append("\"");
                    if (item.Selected)
                        output.Append(@" checked=""chekced""");
                    output.Append(" />");
                    output.Append(item.Text);
                    output.Append("<br />");
                }
                output.Append("</div>");
    
                return output.ToString();
            }

    Hope this helpful

    Regards

    Young Yang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 23, 2011 11:24 PM
  • User-474980206 posted

    there is no browser support for this. you can pick one of the many jquery plugins for this. google and pick the one you like best.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 24, 2011 1:20 AM
  • User-1255412691 posted

    Take a look at Chosen.

    http://harvesthq.github.com/chosen/

    BOb

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 7, 2011 1:13 PM
  • User-1005219520 posted

    My blog Working with the DropDownList Box and jQuery  uses the Chozen DDL

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 7, 2011 1:45 PM
  • User-1255412691 posted

    I was able to set up an use chosen farily easliy. The problem I'm having is with MVC3 the dropdown helper and MultiSelectList.

    I am having trouble specifying the already selected items for an edit screen. MVC3 is a great product but the refernce docs aren't enough. They really need more comprehensive documentation to explain how stuff works. I have actually posted the question on StackOverFlow but no responses yet. 

    http://stackoverflow.com/questions/8422718/how-do-you-properly-create-a-multiselect-select-using-the-dropdownlist-helper

    Would love some help if anyone is able.

    BOb

    Thursday, December 8, 2011 9:55 AM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 8, 2011 8:49 PM
  • User-1255412691 posted

    I've got a complete tutorial on DropDownList and LIstBox and a sample using Chosen. Email me if you want a preview.

    See Working with the DropDownList Box and jQuery and My blog Cascading DropDownList in ASP.Net MVC

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 8, 2011 9:03 PM