InterActiveMultiSelect - jQuery Plugin Demo

A jQuery multi-select plugin compatible with all frameworks including ASP.NET MVC, Bootstrap modals, and more.

Checkbox Mode (Multiple Selection)

Select Fruits Initialization Example

<!-- HTML -->
<select id="fruits" name="SelectedFruits" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  ...
</select>

<!-- JavaScript -->
$('#fruits').interActiveMultiSelect({
  mode: 'checkbox',        // default mode
  placeholder: 'Select Fruits'
});

Radio Mode (Single Selection)

Select Country Initialization Example

<!-- HTML (no 'multiple' attribute for radio) -->
<select id="country" name="SelectedCountry">
  <option value="">-- Choose --</option>
  <option value="pk">Pakistan</option>
  <option value="us">United States</option>
  ...
</select>

<!-- JavaScript -->
$('#country').interActiveMultiSelect({
  mode: 'radio',           // single selection only
  placeholder: 'Select Country'
});

With Search Option

Select Employees Initialization Example

<!-- HTML -->
<select id="employeesSearch" name="EmployeeIds" multiple>
  <option value="1">Ahmed Khan</option>
  <option value="2">Sara Ali</option>
  ...
</select>

<!-- JavaScript -->
$('#employeesSearch').interActiveMultiSelect({
  placeholder: 'Select Employees',
  search: true,            // enables search box
  searchPlaceholder: 'Search employees...'
});

Radio with Search

Select City Initialization Example

<!-- HTML -->
<select id="citySearch" name="City">
  <option value="">-- Choose City --</option>
  <option value="khi">Karachi</option>
  ...
</select>

<!-- JavaScript -->
$('#citySearch').interActiveMultiSelect({
  mode: 'radio',           // single selection
  placeholder: 'Select City',
  search: true,            // with search enabled
  searchPlaceholder: 'Search city...'
});

Bootstrap Modal Compatibility

Initialization Example

<!-- Initialize when modal opens -->
$('#demoModal').on('shown.bs.modal', function(){
  // Prevent double initialization
  if (!$('#employees').data('ias-init')){
    $('#employees').interActiveMultiSelect({
      placeholder: 'Select Employees',
      search: true
    }).data('ias-init', true);
  }
});

With Option Groups

Select Skills Initialization Example

<!-- HTML with optgroup for grouping -->
<select id="skills" name="SkillIds" multiple>
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="csharp">C#</option>
    <option value="python">Python</option>
  </optgroup>
</select>

<!-- JavaScript -->
$('#skills').interActiveMultiSelect({
  placeholder: 'Select Skills',
  search: true,            // filter within groups
  searchPlaceholder: 'Search skills...'
});

ASP.NET MVC Form Example (with Search)

Select Categories Initialization Example

<!-- ASP.NET MVC Razor View -->
<select id="categories" name="CategoryIds" multiple>
  @foreach(var cat in Model.Categories) {
    <option value="@cat.Id" 
      @(Model.Selected.Contains(cat.Id) ? "selected" : "")>
      @cat.Name
    </option>
  }
</select>

<!-- JavaScript -->
$('#categories').interActiveMultiSelect({
  placeholder: 'Select Categories',
  search: true
});

// Controller receives: int[] CategoryIds

Custom Theme (Dark)

Select Colors Initialization Example

<!-- HTML with custom class -->
<select id="colors" class="form-select ias-dark" multiple>
  <option value="red">Red</option>
  ...
</select>

<!-- CSS Variables for dark theme -->
.ias-dark + .ias-wrapper {
  --ias-btn-bg: #343a40;
  --ias-btn-color: #fff;
  --ias-dropdown-bg: #343a40;
  --ias-item-color: #fff;
  --ias-item-hover-bg: #495057;
}

<!-- JavaScript -->
$('#colors').interActiveMultiSelect({
  placeholder: 'Select Colors'
});

With Disabled Options

Select Status Initialization Example

<!-- HTML with disabled attribute -->
<select id="status" name="Status" multiple>
  <option value="active">Active</option>
  <option value="pending">Pending</option>
  <option value="disabled" disabled>
    Disabled (not selectable)
  </option>
  <option value="archived">Archived</option>
</select>

<!-- JavaScript -->
$('#status').interActiveMultiSelect({
  placeholder: 'Select Status'
});

InterActiveMultiSelect Plugin Demo