HTML で選択ドロップダウンボックスのコンテンツが不完全に表示され、部分的にカバーされる問題の解決策

今日、問題が発生しました。クエリバーのドロップダウンボックスの内容が長すぎて、一部が隠れてしまっていました。

いくつか情報を調べてみたところ、関数制御を使うように書いてあるものや、イベント制御を使うように書いてあるものなどがあり、理解できないものや、実装するには複雑すぎるものもありました。その後、同僚に簡単な方法があるかどうか尋ねたところ、オプションにタイトル属性を追加するように言われました。そこで彼の方法を試してみたところ、最終的にこの方法が機能することが分かりました。なので、忘れないように書き留めておきたいと思います。

1. 具体的な例は以下のとおりです

コードをコピー

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>HTML で選択ドロップダウンボックスのコンテンツが不完全に表示される問題の解決方法</title>
<スタイルタイプ="text/css">
#エリアオプション{
幅:140ピクセル;
}
</スタイル>
</head>
<body style="width:80%; height:100px; text-align:center;">
<div id="div_select">
<label for="area">文字:</label>
<select id="area" name="area" style="width:150px;">
<option value="0">すべて</option>
<option value="1" title="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option value="2" title="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
<option value="3" title="CCCCCCCCCCCCCCCCCCCCCCCCCCCC">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</option>
<option value="4" title="DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option>
<option value="5" title="EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>
<option value="6" title="FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option>
<option value="7" title="GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG">GGGGGGGGGGGGGGGGGGGGGGGGGGGG</option>
<option value="8" title="HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH">HHHHHHHHHHHHHHHHHHHHHHHHHH</option>
<option value="9" title="IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option>
</選択>
</div>
</本文>
</html>

2. 結果例

3. 動的データ

コードをコピー

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

<div id="div_select">
<label for="area">都道府県:</label>
<select id="area" name="area" style="width:150px;">
<option value="0">すべて</option>
<c:forEach items="${list}" var="area">
<option value="${area.areaCode}" title="${area.areaName}">${area.areaName}</option>
</c:forEach>
</選択>
</div>

<<: JavaScript排他的思考の具体的な実装

>>: MySQL Shell import_tableデータインポートの実装