ドロップダウン リスト内に複数選択用のチェックボックスを作成するにはどうすればよいですか?

ドロップダウン リスト内にチェックボックスを作成する

複数選択ドロップダウン リストを作成するときの目標は、ユーザーがドロップダウン リストから複数のオプションを選択できるようにすることです。ドロップダウンメニュー。 を追加するなどの単純なアプローチを使用します。 内タグを使用すると、ドロップダウン フィールドの前にチェックボックスが表示されます。

これに対処し、複数のオプションを選択できるようにするには、より洗練されたアプローチが必要です。以下は、ドロップダウン内の各オプションのチェックボックスを作成するソリューションです。

.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 中国語 Web サイトの他の関連記事を参照してください。