다중 선택을 위해 드롭다운 목록 안에 확인란을 만드는 방법은 무엇입니까?

드롭다운 목록 안에 확인란 만들기

다중 선택 드롭다운 목록을 만들 때 목표는 사용자가 목록에서 여러 옵션을 선택할 수 있도록 하는 것입니다. 드롭다운 메뉴. 태그를 지정하면 드롭다운 필드 앞에 확인란이 표시됩니다.

이 문제를 해결하고 여러 옵션을 선택할 수 있도록 하려면 보다 정교한 접근 방식이 필요합니다. 다음은 드롭다운 내의 각 옵션에 대한 확인란을 생성하는 솔루션입니다.

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!