CODEWITHSUNDEEP
javascripthtmlspring-mvccheckbox
benskiiii
benskiiii

Reputation: 469

Multi select dropdown with checkbox & search method

is there any plugin that can do this?

I have a Spring MVC project, so it needs to be in html/JavaScript/java something..

Something like this: http://harvesthq.github.io/chosen/ , the second one (Multiple Select), but it doesn't have checkboxes. Also a good thing would be to have select all option on top of it, but that's optional. So in short: -Search -Multi checkbox for multiple choices

Thanks in forehand.

Upvotes: 1

Views: 19709

Answers (1)

Dustin
Dustin

Reputation: 90

This isn't really related to Spring directly. It's more of a HTML/JS (front-end) issue. If you like the way that the select box works on the link you provided, and it fits the scope of your project, then there's a few steps you'd want to take:

  1. Render the select box as normal with whichever HTML templating framework you are using with Spring (whether Themeleaf, JSP, Handlebars, or something else). Make sure there is a multiple attribute in the select tag.
  2. Download and add the jQuery JavaScript library to this page (required for the "plugin" in the link).
  3. Download and add the Chosen file from your link to your page after jQuery.
  4. Activate the plugin as described.

Here's a brief skeleton of how I would do it (as rendered HTML, not the template; which depends on implementation):

<html>
  <head>
  </head>
  <body>
    <select class="chosen-select" multiple>
      <option value="1">Option 1</option>
      <option value="2">Value 2</option>
    </select>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="/path/to/resources/chosen.jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $(".chosen-select").chosen();
      });
    </script>
  </body>
</html>

I would definitely recommend reading into jQuery and JavaScript in general on top of all of this. I hope this helps get you rolling!

Upvotes: 1

Related Questions