How to insert Checkbox inside Select dropdown using JavaScript

In this article we discuss about how to insert Checkbox inside Select dropdown using JavaScript.

what is JavaScript?

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.

You cannot place a checkbox inside a select element but you can get the same functionality by using HTML, CSS, and JavaScript. Here is a possible working solution. The explanation follows.

How to insert Checkbox inside Select dropdown using JavaScript

HTML CODE:

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>

CSS

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

If you want change the styles you can add more CSS

JavaScript

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

You cannot place a checkbox inside a select element but you can get the same functionality by using HTML, CSS, and JavaScript. Here is a possible working solution. The explanation follows.


Explanation:

At first, we create a select element that shows the text “Select an option”, and an empty element that covers (overlaps) the select element (<div class="overSelect">). We do not want the user to click on the select element – it would show empty options. To overlap the element with another element we use CSS position property with value relative | absolute.

To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element (<div class="selectBox" onclick="showCheckboxes()">).

We also create a div that contains our checkboxes and style it using CSS. The above-mentioned JavaScript function just changes <div id="checkboxes"> value of CSS display property from “none” to “block” and vice versa.

Output:

checkbox in dropdown

Also Check out: How to call Bootstrap modal popup on the select dropdown

Related Posts

Leave a Reply

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