如何在下拉清單中建立複選框以進行多項選擇？

在下拉清單中建立複選框

建立多選下拉清單時，目標是使用戶能夠從一個選項中選擇多個選項下拉式選單。使用簡單的方法，例如新增 在 內標記結果出現在下拉欄位前面的核取方塊中。

要解決此問題並允許選擇多個選項，需要更複雜的方法。以下是為下拉清單中的每個選項建立複選框的解決方案：

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
};

<div><p>此方法利用 CSS 和 JavaScript 建立出現在下拉清單中的功能清單。透過點擊「選擇水果」錨點，使用者可以顯示或隱藏選項清單並使用複選框選擇多個水果。 </p></div>

以上是如何在下拉清單中建立複選框以進行多項選擇？的詳細內容。更多資訊請關注PHP中文網其他相關文章！