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

时间:2016-07-15 15:52:29

标签: javascript html css

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

enter image description here

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

enter image description here

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

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

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

1 个答案:

答案 0 :(得分:2)

此代码将设置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;
&#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;
&#13;
&#13;