HTML での select optgroup タグの使用の概要

HTML での select optgroup タグの使用の概要
時々、選択した内容をグループ化する必要があります。以前はプログラム制御を使用していました。今日、select に optgroup 属性があり、それが使用できることがわかりました。

テスト済みで、Firefox や IE などのブラウザに適しています。これまでに見つかった唯一の欠点は、グループの後のタイトル スタイルをカスタマイズできないことです。たとえば、フォントのプロパティを変更する場合、通常のフォントは使用できませんが、色とサイズを変更することはできます。 IEでは、デフォルトは斜体と太字です


コードをコピー
コードは次のとおりです。

<select name="bid" id="brand_3">
<option value="">ブランドを選択してください</option>
<optgroup ラベル="A"></optgroup>
<option value="693" custom="693">A AC BMW</option>
<option value="62" custom="62">アストンマーティン</option>
<option value="1" custom="1">アウディ</option>
<optgroup ラベル="B"></optgroup>
<option value="723" custom="723">B バボス</option>
<option value="44" custom="44">B ポルシェ</option>
<option value="582" custom="582">B バオジュン</option>
<option value="20" custom="20">B BMW</option>
<option value="593" custom="593">B 北京オート</option>
<option value="643" custom="643">B BAIC 威王</option>
<option value="122" custom="122">B BAIC 製造</option>
<option value="4" custom="4">B メルセデスベンツ</option>
</選択>

<<:  現在のマウススライドの座標を取得するVue+openlayer5メソッド

>>:  CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。

推薦する

jQuery はシャッター効果を実現します (li 配置を使用)

この記事では、ブラインド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体...

クラウドネイティブテクノロジー Kubernetes (K8S) の紹介

目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...

VirtualBox でのホストオンリー + NAT モードのネットワーク構成

VirtualBoxのHost Only+NATモードのネットワーク構成は参考用です。具体的な内容は...

MySQL複合クエリの詳細な説明

UNIONの使用ほとんどの SQL クエリは、1 つ以上のテーブルからデータを返す単一の SELEC...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

数十億のデータに対するMySQLページングの最適化に関する簡単な説明

目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...

Mac インストール mysqlclient プロセス分析

仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...

主キーを追加または変更するMySQL SQL文操作

テーブルフィールドを追加する テーブルtable1を変更し、トランザクタvarchar(10)をNu...

MySQL における識別子の大文字と小文字の区別の問題の詳細な分析

MySQL では、テーブル名の大文字と小文字の区別の問題が発生する可能性があります。実際、これはプラ...

Vueコンポーネント登録方法の解釈

目次概要1. グローバル登録2. 現地登録3. モジュールシステムへのローカル登録概要コンポーネント...

JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明

目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...

Ubuntu で nvidia グラフィック ドライバーをインストールする (簡単なインストール方法)

Ubuntu で nvidia グラフィック カード ドライバーをインストールします。同じ方法で ...

HTMLでvueとel​​ement-uiを直接参照する方法

コードは次のようになります。 <!DOCTYPE html> <html> ...

Apple の携帯電話のロックを解除するときに光沢のあるフォント効果を実現するために CSS3 を使用する例

0. はじめに2016 年 8 月 18 日 今日、iPhone をスライドさせてロックを解除すると...