Press "Enter" to skip to content

Create a Filterable Multilevel Selector in a Side Modal | jQuery modal selector

Modal Selector is a jQuery plugin for creating a multilevel filterable selector side modal from where you can select elements.

multi select dropdown filter with search, searchable multi select dropdown plugin with jquery, multiselect plugin jquery, dynamic multi select dropdown jquery

How to make use of it:

1. Load the mandatory jQuery library, Bootstrap framework, and Font Awesome within the doc.

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />
<!-- jQuery + Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Create a button to toggle the modal selector.

<button id="click" class="btn btn-primary" type="button" name="button">Click</button>

3. Download and load the Modal Selector plugin’s files.

<link rel="stylesheet" href="modal-selector.min.css" />
<script src="modal-selector.min.js"></script>

4. Initialize the plugin on the toggle component and outline your individual item information as follows.

$("#click").ModalSelector({
  data: [
    {
      name: "WCF",
      id: 1,
      children: [
        {
          name: "Web",
          id: 11,
          children: [
            {
              name: "CodeFlow",
              id: 111
            }
          ]
        }
      ]
    },
    {
      name: "webcodeflow",
      id: 2,
      children: [
        {
          name: "Popular",
          id: 22
        },
        {
          name: "Sliders",
          id: 23,
          children: [
            {
              name: "Carousel",
              id: 231
            },
            {
              name: "Slideshow",
              id: 232
            }
          ]
        },
        {
          name: "Featured",
          id: 24
        },
        {
          name: "Top Downloaded",
          id: 25
        }
      ]
    }
  ]
});

5. Or load information from an exterior information supply.

$("#click").ModalSelector({
  url: '/path/to/data/'
});

6. Get the title & ID of the chosen item.

$("#click").ModalSelector({
  onSelect: function(e, data, modal){
    console.log(data.name, data.id);
    modal.modal("hide");
  },
});

7. All potential plugin choices.

$("#click").ModalSelector({
  url: null,
  data: null,
  nameProperty: "name",
  idProperty: "id",
  childrenProperty: "children",
  _: {
    id: Math.floor(Math.random()*10000),
    modalParent: "body"
  },
  localization: {
    search: "Search..."
  },
  icons: {
    search: "fas fa-search",
    parent: "fas fa-level-up-alt fa-rotate-90",
    child: "fas fa-play"
  },
  onSelect: null
});

Filterable Multi-level Selector Plugin, Modal Selector Github, jquery multi select dropdown with search example, jquery multiple select dropdown


See Demo And Download

Official Website(Qaala): Click Here

This superior jQuery/javascript plugin is developed by Qaala. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *