Having trouble with a dropdown menu that allows for multi-select options?

Question

Having trouble with a dropdown menu that allows for multi-select options?

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

.gradesub-filter{
    width: 299px;
    height: 335px;
    margin: 30px 0px 0px 0px;
    background-color: #ffffff;
}
  .form-filter-shade{
    padding: 16px 0px 9px 20px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 2px solid #F0F0F0;
}


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

<div class="gradesub-filter">
    <div class="form-filter-shade">Gradecheck</div>
  <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>
  </div>

I am attempting to implement a "Drop-down with multi-select" feature using checkboxes, similar to the image provided below. However, I am encountering difficulties in selecting items from the dropdown list.

I suspect that the issue lies within the JavaScript code, specifically in fetching values during the onclick event. Can someone kindly provide guidance on how to resolve this issue?

javascript html css vue.js ng-dropdown-multiselect

Answer 1

Answer №1

It seems like you are in search of nested checkboxes, as indicated by the provided image.

Here is a snippet of code that includes the use of <ul> and <li> tags to align checkboxes and utilizes JavaScript query selectors for checkbox functionality:

var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");

for(var i = 0; i < subOptions.length; i++ ){
    subOptions[i].onclick = function(){
        var checkedCount = document.querySelectorAll('input.sub:checked').length;
        checkAll.checked = checkedCount > 0;
        checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
    }
}

checkAll.onclick = function() {
  for(var i=0; i<subOptions.length; i++) {
    subOptions[i].checked = this.checked;
  }
}


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

.gradesub-filter{
    width: 299px;
    height: 335px;
    margin: 30px 0px 0px 0px;
    background-color: #ffffff;
}
  .form-filter-shade{
    padding: 16px 0px 9px 20px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 2px solid #F0F0F0;
}
  
  
.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;
}

ul{
    margin-left: -25px;    
}

li{
    list-style: none;
}

<div class="gradesub-filter">
    <div class="form-filter-shade">Gradecheck</div>
    <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
            <select>
                <option>Select an option</option>
            </select>
            <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
            <ul>
                <li>
                    <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                    <ul>
                        <li>
                            <label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
                        </li>
                        <li>
                            <label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
                        </li>
                        <li>
                            <label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
                        </li>
                    </ul>
                </li>
                <li>
                    <label for="two"><input type="checkbox" id="two" />Second checkbox</label>
                </li>
               <li>
                    <label for="three"><input type="checkbox" id="three" />Third checkbox</label>
                </li>
            </ul>
        </div>
    </div>
</div>

If there are any further details needed or assistance required, please do not hesitate to leave a comment.

Answer 2

It seems like you are in search of nested checkboxes, as indicated by the provided image.

Here is a snippet of code that includes the use of <ul> and <li> tags to align checkboxes and utilizes JavaScript query selectors for checkbox functionality:

var subOptions = document.querySelectorAll('input.sub');
var checkAll = document.getElementById("one");

for(var i = 0; i < subOptions.length; i++ ){
    subOptions[i].onclick = function(){
        var checkedCount = document.querySelectorAll('input.sub:checked').length;
        checkAll.checked = checkedCount > 0;
        checkAll.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
    }
}

checkAll.onclick = function() {
  for(var i=0; i<subOptions.length; i++) {
    subOptions[i].checked = this.checked;
  }
}


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

.gradesub-filter{
    width: 299px;
    height: 335px;
    margin: 30px 0px 0px 0px;
    background-color: #ffffff;
}
  .form-filter-shade{
    padding: 16px 0px 9px 20px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 2px solid #F0F0F0;
}
  
  
.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;
}

ul{
    margin-left: -25px;    
}

li{
    list-style: none;
}

<div class="gradesub-filter">
    <div class="form-filter-shade">Gradecheck</div>
    <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
            <select>
                <option>Select an option</option>
            </select>
            <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
            <ul>
                <li>
                    <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                    <ul>
                        <li>
                            <label for="sub-one"><input class='sub' type="checkbox" id="sub-one" />Sub One checkbox</label>
                        </li>
                        <li>
                            <label for="sub-two"><input class='sub' type="checkbox" id="sub-two" />Sub Two checkbox</label>
                        </li>
                        <li>
                            <label for="sub-three"><input class='sub' type="checkbox" id="sub-three" />Sub Three checkbox</label>
                        </li>
                    </ul>
                </li>
                <li>
                    <label for="two"><input type="checkbox" id="two" />Second checkbox</label>
                </li>
               <li>
                    <label for="three"><input type="checkbox" id="three" />Third checkbox</label>
                </li>
            </ul>
        </div>
    </div>
</div>

If there are any further details needed or assistance required, please do not hesitate to leave a comment.

Having trouble with a dropdown menu that allows for multi-select options?

Answer №1

Similar questions

By harnessing a JSON response

Converting Promises to Observables

Is it possible to use jQuery to create a slide-up effect from the

Best practices for handling multiple tables in AngularJS HTML

The image source is not functioning properly to display the image, even though it is working perfectly on

Creating a responsive grid layout with HTML and CSS

JavaScript function overriding allows a subclass to provide a specific implementation of

Incorporating the use of font color in CSS styles and

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

View Preview Image using the following image tag in JavaScript

What is the best method for transforming a stream into a file with AngularJS?

Submitting information via jQuery

Bootstrap3 and jQuery are attempting to achieve vertical alignment

Error encountered in NodeJS after refreshing the node server

Tips for keeping your button fixed in place

Togglebox CSS is set to hide elements initially

How can I show only the final four digits of an input field using Angular Material and AngularJS?

JSP form continues to submit despite JavaScript validation returning false

Determine the number of rows in an Excel spreadsheet using JavaScript

Utilizing Multiple Canvases Simultaneously