尝试使用多选处理下拉菜单时出错? [英] Error when trying to work on drop down with multi select?

查看：28
本文介绍了尝试使用多选处理下拉菜单时出错?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

var Expanded = false;功能 showCheckboxes() {var checkboxes = document.getElementById("checkboxes");如果(！扩展){checkboxes.style.display = "block";扩展 = 真；} 别的 {checkboxes.style.display = "none";扩展 = 假；}}

.gradesub-filter{宽度:299px；高度:335px；边距:30px 0px 0px 0px;背景色:#ffffff；}.form-filter-shade{填充:16px 0px 9px 20px；字体粗细:600；字体大小:16px；边框底部:2px 实心 #F0F0F0;}.多选 {宽度:200px；}.selectBox {位置:相对；}.selectBox 选择 {宽度:100%；字体粗细:粗体；}.overSelect {位置:绝对；左:0；右:0；顶部:0；底部:0；}#复选框{显示:无；边框:1px #dadada 实心；}#checkboxes 标签{显示:块；}#checkboxes 标签:悬停{背景颜色:#1e90ff；}

<div class="form-filter-shade">Gradecheck</div><div class="multiselect"><div class="selectBox" onclick="showCheckboxes()"><选择><option>选择一个选项</option></选择><div class="overSelect"></div>
<div id="复选框"><label for="one"><input type="checkbox" id="one"/>第一个复选框</label><label for="two"><input type="checkbox" id="two"/>第二个复选框</label><label for="三"><input type="checkbox" id="three"/>第三个复选框</label>

我正在尝试多选下拉"带有复选框，如下图所示.现在代码的问题是无法从下拉列表中选择列表.

我认为问题出在js代码中，在onclick期间它没有获取值，有人可以建议我解决这个问题

解决方案

我认为您正在寻找嵌套的复选框，提供的图像也建议相同.

这是代码片段，简单地添加了

    和
  • 标签来对齐复选框，并使用了一些 JavaScript 查询选择器来实现复选框功能.>

    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 &&已检查计数

    .gradesub-filter{宽度:299px；高度:335px；边距:30px 0px 0px 0px;背景色:#ffffff；}.form-filter-shade{填充:16px 0px 9px 20px；字体粗细:600；字体大小:16px；边框底部:2px 实心 #F0F0F0;}.多选 {宽度:200px；}.selectBox {位置:相对；}.selectBox 选择 {宽度:100%；字体粗细:粗体；}.overSelect {位置:绝对；左:0；右:0；顶部:0；底部:0；}#复选框{显示:无；边框:1px #dadada 实心；}#checkboxes 标签{显示:块；}#checkboxes 标签:悬停{背景颜色:#1e90ff；}ul{左边距:-25px；}李{列表样式:无；}

    <div class="form-filter-shade">Gradecheck</div><div class="multiselect"><div class="selectBox" onclick="showCheckboxes()"><选择><option>选择一个选项</option></选择><div class="overSelect"></div>
    <div id="复选框"><ul><li><label for="one"><input type="checkbox" id="one"/>第一个复选框</label><ul><li><label for="sub-one"><input class='sub' type="checkbox" id="sub-one"/>Sub One checkbox</label>
    • <li><label for="sub-two"><input class='sub' type="checkbox" id="sub-two"/>Sub Two checkbox</label><li><label for="sub-three"><input class='sub' type="checkbox" id="sub-three"/>Sub 三复选框</label>
<li><label for="two"><input type="checkbox" id="two"/>第二个复选框</label><li><label for="three"><input type="checkbox" id="three"/>第三个复选框</label>

既然你在问题中显然没有提到，我认为这会是你要找的.如果需要任何帮助，请在评论中提及.

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 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 thinking that the issue is in js code, where it is not fetching values during onclick, Can any one please suggest me to solve the issue

解决方案

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.

这篇关于尝试使用多选处理下拉菜单时出错?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆