Blog of King Software

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
Web Design in Ilford, Essex-Kingsoftware.

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>