Question

我试图找出一种方法，当用户选择多个复选框时，它会显示在选项中并在用户选择多个选项时展开。目前，这就是它的显示方式：

正如您在上面所看到的，我可以让用户选择多个复选框，但我希望它能做到这样的事情：

因此它将显示在选择选项框中，而是显示在一行中，结果显示在带有复选框的列中。

任何帮助将不胜感激，以下是我的所作所为：

HTML：

<td colspan="4">
    <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
            <select>
                <option value="" disabled selected hidden>Select an option</option>
            </select>
        </div>
        <div id="checkboxes">
            <label for="one"><input type="checkbox" id="one"/>Replacement</label>
            <label for="two"><input type="checkbox" id="two"/>Additional Position </label>
            <label for="three"><input type="checkbox" id="three"/>New Title/Position</label>
        </div>
</div></td>

CSS：

        .multiselect {
            width: 200px;
        }
        .selectBox {
            position: relative;
        }
        .selectBox select {
            width: 100%;
            font-weight: bold;
        }
        .overSelect {
            position: absolute;
            left: 0; right: 0; top: 0; bottom: 0;
            text-align:center;
        }
        #checkboxes {
            display: none;
            border: 1px #dadada solid;

        }
        #checkboxes label {
            display: block;
        }
        #checkboxes label:hover {
            background-color: white;
        }

JAVASCRIPT：

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

Answer 1

此代码将设置OPTION元素的文本以匹配选中的输入：

document.getElementById('checkboxes').addEventListener('change', function(e) {
  var checked = document.querySelectorAll('#checkboxes input:checked'),
      text = [];

  for(var i = 0 ; i < checked.length ; i++) {
    text.push(checked[i].parentNode.textContent.trim());
  }
  document.querySelector('select option').textContent = 
      text.join(', ') || 'Select an option';
});

工作原理：

这会在checkboxes DIV上添加一个事件侦听器，只要其中一个输入发生更改就会触发该事件侦听器：

document.getElementById('checkboxes').addEventListener('change', function(e) {

这会抓取所有已检查的INPUT元素：

var checked = document.querySelectorAll('#checkboxes input:checked'),

这些行创建了一个数组，其中包含每个已检查的INPUT元素的textContent父项（LABEL元素）：

text = [];

for(var i = 0 ; i < checked.length ; i++) {
  text.push(checked[i].parentNode.textContent.trim());
}

这会将OPTION元素的文本设置为LABEL文本的逗号分隔列表。如果没有选中任何INPUT，则默认为“选择一个选项＆＃39;：

document.querySelector('select option').textContent = 
     text.join(', ') || 'Select an option';

<强>段：

＆＃13;

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;
  }
}

document.getElementById('checkboxes').addEventListener('change', function(e) {
  var checked = document.querySelectorAll('#checkboxes input:checked'),
    text = [];

  for (var i = 0; i < checked.length; i++) {
    text.push(checked[i].parentNode.textContent.trim());
  }
  
  document.querySelector('select option').textContent = 
    text.join(', ') || 'Select an option';
});

＆＃13;

.multiselect {
  width: 200px;
}
.selectBox {
  position: relative;
}
.selectBox select {
  width: 300px;
  font-weight: bold;
}
.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}
#checkboxes {
  display: none;
  border: 1px #dadada solid;
}
#checkboxes label {
  display: block;
}
#checkboxes label:hover {
  background-color: white;
}

＆＃13;

<div class="multiselect">
  <div class="selectBox" onclick="showCheckboxes()">
    <select>
      <option value="" disabled selected hidden>Select an option</option>
    </select>
  </div>
  <div id="checkboxes">
    <label for="one">
      <input type="checkbox" id="one" />Replacement</label>
    <label for="two">
      <input type="checkbox" id="two" />Additional Position</label>
    <label for="three">
      <input type="checkbox" id="three" />New Title/Position</label>
  </div>
</div>

＆＃13;

在选项标签中显示下拉项目

1 个答案: