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>

https://i.sstatic.net/GmLvp.png

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

What is the best way to implement CSS styling in the existing Vue.js template?

Replace all occurrences of a specific string throughout a extensive document in Node.js

Creating a custom route that is specific to a single ejs file

Exploring the world of npm packages: from publishing to utilizing them

The interaction between a JavaScript function call and C# is not functioning properly

Chat lines in Chrome displaying double entries - troubleshooting needed

How can I make sure that the combobox in my Ionic app is aligned with the text fields in a row?

Obtaining an attribute of a row in a table using Selenium and Python

Using Angular.js to fetch information from a MySQL database

What is the best way to create hover effects on buttons in Vue.js 3?

Tips for displaying the Year Dropdown before the Month Dropdown in Jquery Datepicker

Complicated "as-label" for understanding expressions in Angular

Animate out Material UI element with zoom effect and then remove it from the

Creating a VSCode extension using Vue: Step-by-step guide

Querying the jQuery-Plugin to interact with AngularJS service methods

The styling of the CSS is tailored to various breakpoints

CSS Layout - Float: What's floating to the top?

Encountering challenges with CORS implementation in a test application

Leverage the power of the General Sibling Selector to easily traverse through deeply nested elements in your

What is the method to link a progress bar to the value of a text input?