Dropdown with Multiple checkbox using MVC with Jquery

In this article, we will see how to set dropdown with multiple checkbox in MVC. In pervious we will learn about Drop Down list with checkbox in asp.net so same thing we learn in MVC.

Step1:-We create a DropdownController

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace dropdownwithcheckbox.Controllers

{

    public class DropdownController : Controller

    {

        // GET: Dropdown

        public ActionResult Index()

        {

            return View();

        }

    }

}

Step2:- We create an Index.cshtml

@{

    ViewBag.Title = "Dropdown with Multiple checkbox using MVC with Jquery";

    Layout = null;

}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"

      rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"

      rel="stylesheet" type="text/css" />

<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"

        type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        $('#drpcity').multiselect({

            includeSelectAllOption: true

        });

        $('#btnSelected').click(function () {

            var selected = $("#drpcity option:selected");

            var message = "";

            selected.each(function () {

                message += $(this).text() + " " + $(this).val() + "\n";

            });

            alert(message);

        });

    });

</script>

<div>

    <table>

        <tr>

            <td>Select City Name</td>

            <td>

                <select id="drpcity" multiple="multiple">

                    <option value="1">Lucknow</option>

                    <option value="2">Delhi</option>

                    <option value="3">Mumbai</option>

                    <option value="4">Agra</option>

                    <option value="5">Pune</option>

                    <option value="6">Goa</option>

                </select>

            </td>

            <td><input type="button" id="btnSelected" value="Get Selected" /></td>

        </tr>

    </table>

</div>

Out-Put:-