選択オプション内にチェックボックスを実装できますか?

選択オプション内のチェックボックスの実装

質問:

オプション内にチェックボックスを組み込むことは可能ですか? a [オプションの選択] メニュー。リスト内の個々の項目にはチェックボックスと項目の両方が含まれます。 name?

答え:

select 要素内にチェックボックスを直接配置することはできませんが、HTML と CSS を組み合わせることで同様の機能を実現できます。 、 そしてJavaScript.

解決策:

1. 選択オプション メニューを作成します:

   <select>
       <option>Select an option</option>
   </select>

   ログイン後にコピー

2. チェックボックスを作成するリスト:

   <div>

   ログイン後にコピー

3. チェックボックスの表示と非表示 リスト:

   function showCheckboxes() {
       var checkboxes = document.getElementById("checkboxes");
       if (!expanded) {
           checkboxes.style.display = "block";
           expanded = true;
       } else {
           checkboxes.style.display = "none";
           expanded = false;
       }
   }

   ログイン後にコピー

4. スタイリング:
   の外観をカスタマイズできます。カスタム CSS を使用した複数選択ボックス。たとえば、次の 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; }
   #checkboxes { display: none; border: 1px #dadada solid; }
   #checkboxes label { display: block; }
   #checkboxes label:hover { background-color: #1e90ff; }

   ログイン後にコピー

5. 使用法:

   • クリック[オプションの選択] ボックスにチェック ボックス リストが表示されます。
   • 必要なチェックボックスを選択し、これらはカンマ区切りの値として [オプションの選択] ボックスに反映されます。

注: これは標準の HTML/CSS ソリューションではありませんが、これは、[オプションの選択] メニュー内のチェックボックスの機能を実現するための回避策を提供します。

以上が選択オプション内にチェックボックスを実装できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。