MultiSelect DD

📋 Example 1: Auto-Initialize

Simply add class multiDD to your select element

Select Countries First 2 items shown, then count appears

                <select class="multiDD" name="countries" multiple>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
</select>
            

⚙️ Example 2: Custom Options

Initialize with custom settings

Select Your Skills (Max 5) With search, max 5 selections, and close on select

                $('#skills').multiSelectDD({
    placeholder: 'Choose your skills',
    max: 5,
    closeOnSelect: false,
    selectAll: false
});
            

📊 Example 3: Load from JavaScript

Populate using JavaScript data array

Select Categories Data loaded via JavaScript array

                $('#categories').multiSelectDD({
    data: [
        { value: '1', text: 'Electronics', selected: true },
        { value: '2', text: 'Clothing' },
        { value: '3', text: 'Books' }
    ]
});
            

🌐 Example 4: AJAX Data (Simulated)

Load data dynamically from server

Select Products Simulated AJAX loading

                $('#products').multiSelectDD({
    ajax: '/api/products',
    pagination: {
        enabled: true,
        pageSize: 20
    }
});
            

🎮 Control Panel

Test jQuery methods and API calls

Playground

📤 Output:

💻 .NET Integration Example

                Controller: 

public IActionResult Index()

{

       ViewBag.Countries = new List<SelectListItem>

       {

              new SelectListItem { Value = "us", Text = "United States" },

              new SelectListItem { Value = "uk", Text = "United Kingdom" }

       };

       return View();

}

Razor View:

 <select name="countries" class="multiDD" multiple>

       @foreach(var country in ViewBag.Countries)

       {

              <option value="@country.Value">@country.Text</option>

       }

</select>

Get Values in Controller:

[HttpPost]

public IActionResult Save(List<string> countries)

{

       // countries contains selected values

       return RedirectToAction("Index");

}