Author: John Au-Yeung

Sometimes, we want to add checkboxes inside select options with JavaScript.

In this article, we’ll look at how to add checkboxes inside select options with JavaScript.

Add Checkboxes Inside Select Options with JavaScript

To add checkboxes inside select options with JavaScript, we can wrap our select drop down in a div and then add a div below the select element to show the drop-down choices.

For instance, we can write the following HTML:

<form>
  <div class="multiselect">
    <div class="selectBox">
      <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>

We add the select element with the div with ID checkboxes with the choices.

The input with type checkbox are the checkboxes.

Then we can add the following CSS to make the choices look like they’re part of the drop-down:

.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;
}

To do that, we div with ID overSelect absolute.

And we make the div with ID selectBox have relative position.

Also, we make the div with ID checkboxes hidden by setting the display property to none .

Finally, we add the following JavaScript code to toggle the div with ID checkboxes on and off:

let expanded = false;

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

const selectBox = document.querySelector('.selectBox')
selectBox.addEventListener('click', showCheckboxes)

We add the expanded variable to track the display state of the checkbox.

And we get the div with ID checkboxes with document.getElementById .

If expanded is false , then we set display to 'block' .

Otherwise, we set display to 'none' .

We also update expanded accordingly in each case.

Finally, we get the div with class selectBox with document.querySelector , call addEventListener with 'click' to add a click listener to it, and use showCheckboxes as the click listener.

Now when we click on the select element, we should see the drop-down with the checkboxes that we created.

Conclusion

To add checkboxes inside select options with JavaScript, we can wrap our select drop down in a div and then add a div below the select element to show the drop-down choices.

Sometimes, we want to use the setTimeout function in a JavaScript promise chain.

In this article, we’ll look at how to use the setTimeout function in a JavaScript promise chain.

Create a Function that Returns a Promise that uses setTimeout

We can create a function that returns a promise that calls setTimeout so that we can use setTimeout in a promise chain.

For instance, we can write:

const delay = (t, v) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(v), t)
  });
}

(async () => {
  const one = await Promise.resolve(1)
  console.log(one)
  const two = await delay(1000, 2)
  console.log(two)
  const three = await Promise.resolve(3)
  console.log(three)
})()

to create the delay function that returns a promise by creating one with the Promise constructor.

We pass in a callback that calls setTimeout , which calls resolve with v and delays the execution of the callback by t milliseconds.

Then we use delay in an async function with other promises.

Now we should see a delay when we’re calling delay .

And 1, 2, and 3 are logged in the console log.

Conclusion

We can create a function that returns a promise that calls setTimeout so that we can use setTimeout in a promise chain.

Sometimes, we want to position a div in a specific coordinate with JavaScript.

In this article, we’ll look at how to position a div in a specific coordinate with JavaScript.

Position a Div in a Specific Coordinate with JavaScript

We can set the style.top and style.left properties to position a div in a specific coordinate with JavaScript.

For instance, we can write:

<div>  
  hello world  
</div>

Then we can set the position of the div by writing:

const d = document.querySelector('div');  
d.style.position = "absolute";  
d.style.left = '10px';  
d.style.top = '20px';

We get the div with document.querySelector .

Then we set its position CSS property to 'absolute' with:

d.style.position = "absolute";

Then we set the left and top CSS properties with:

d.style.left = '10px';  
d.style.top = '20px';

The unit must be specified for left and top.

Conclusion

We can set the style.top and style.left properties to position a div in a specific coordinate with JavaScript.

Sometimes, we want to add or update an element’s attribute with JavaScript.

In this article, we’ll look at how to add or update an element’s attribute with JavaScript.

Use the setAttribute Method

One way to add or update an attribute is to use the setAttribute method.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.setAttribute('style', 'color: red')

to set the text color of the div to red.

We call setAttribute with 'style' and 'color: red' to add the style attribute with the value in the 2nd argument.

Use Set the Property of the Element

We can also set the property with the attribute name to add an attribute.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.style = 'color: red'

Then we set the style attribute with the ‘color: red’ string.

Conclusion

One way to add or update an attribute is to use the setAttribute method.

Also, we can also set the property with the attribute name to add an attribute.