Blog

Know something new about Select Box of HTML

HOW TO DISABLE THE SELECTED OPTION AND SELECT AND DISPLAY MULTIPLE OPTION FROM THE DROPDOWN

Created by Krishna Mehta on Date: 29/06/2018

STEPS TO IMPLEMENT MULTI SELECT DROPDOWN

  1. To give style to our multiselect dropdown, link following CSS directly from online in head section of your HTML file.
  2. <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

  3. Add following css to increase width of selection dropdown if we don't want vertical scrolling bar in head section of your HTML file.
  4. < style>
    .chosen-container .chosen-results {
    max-height: 280px;
    }
    </script>

  5. Add following javascript in <script> Section after body section of your HTML file
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
    <script type="text/javascript">
    $(".chosen-select").chosen({
    no_results_text: "Oops, nothing found!"
    })
    </script>

  7. Add following HTML code in body section of your HTML file
  8. <form action="#" method="post">
    <select data-placeholder="Start typing to filter..." multiple class="chosen-select" name="test" style="width:150px;">
    <option value=""></option>
    <option>HTML</option>
    <option>CSS</option>
    <option>JAVASCRIPT</option>
    <option>AJAX</option>
    <option>PHP</option>
    <option>CODEIGNITER</option>
    <option>>MY SQL</option>
    <option>SEO</option>
    <option>SMO</option>
    <option>DIGITAL MARKETING</option>
    </select>
    <input type="submit">
    </form>