Error When Trying To Work On Drop Down With Multi Select?

I am trying to do 'Drop-down with multi select' with checkboxes as shown in the picture below. Now the issue with the code is unable to select the list from the dropdown. I am th

Solution 1:

I think you are looking for nested Checkbox, Provided Image also suggest the same.

Here is the code snippet, simply added <ul> and <li> tags for checkboxes alignment and used some JavaScript query selectors for checkbox functioning.

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>

Since you clearly not mentioned in the question, I thought it would be you looking for. If any help needed, Mention in the comment.