在选项标签中显示下拉项

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>