javascript - 在选项标签中显示下拉项

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 元素的父元素(LABEL 元素)的 textContent 创建一个数组:

text = [];

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

这会将 OPTION 元素的文本设置为逗号分隔的 LABEL 文本列表。如果未选中任何输入，则默认为“选择一个选项”:

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

片段:

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

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

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