濮阳杆衣贸易有限公司

主頁 > 知識庫 > HTML中select下拉框內容顯示不全部分被覆蓋的解決方法

HTML中select下拉框內容顯示不全部分被覆蓋的解決方法

熱門標簽:騰訊植物園地圖標注 華為收費站地圖標注 電話機器人宣傳片 巫山縣地圖標注app 個貸電銷機器人 外呼智能系統(tǒng)報價 浦東新區(qū)百度地圖標注圖片 經綸電銷機器人 鄒城智能外呼系統(tǒng)
今天,我遇到這樣一個問題:查詢欄中的下拉框中的內容過長,導致部分被覆蓋了。

查詢了一些資料,有的說用函數控制,有的說用事件控制,有的看不懂,有的實現起來太復雜了。后來,問了一下同事,有沒有一些簡單的方法,他告訴我在option中加title這個屬性,于是按照他的方法試試,終于發(fā)現這個辦法可行。這樣,我就想記錄下來,避免自己給忘記了。

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML中的select下拉框內容顯示不全的解決辦法</title>
<style type="text/css">
#area option{
width:140px;
}
</style>
</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="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option value="2" title="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
<option value="3" title="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</option>
<option value="4" title="DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option>
<option value="5" title="EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>
<option value="6" title="FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option>
<option value="7" title="GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</option>
<option value="8" title="HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH">HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</option>
<option value="9" title="IIIIIIIIIIIIIIIIIIIIIIIIIIIIII">IIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option>
</select>
</div>
</body>
</html>

2、實例結果

 

3、動態(tài)數據

復制代碼
代碼如下:

<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>
</select>
</div>

標簽:廣西 唐山 南平 滁州 三沙 日喀則 那曲 楊凌

巨人網絡通訊聲明:本文標題《HTML中select下拉框內容顯示不全部分被覆蓋的解決方法》,本文關鍵詞  HTML,中,select,下拉,框,內容,;如發(fā)現本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《HTML中select下拉框內容顯示不全部分被覆蓋的解決方法》相關的同類信息!
  • 本頁收集關于HTML中select下拉框內容顯示不全部分被覆蓋的解決方法的相關信息資訊供網民參考!
  • 推薦文章
    托克托县| 镇安县| 孟连| 和平县| 思南县| 勐海县| 新丰县| 石台县| 泰兴市| 健康| 普宁市| 富宁县| 南木林县| 年辖:市辖区| 康马县| 乳源| 峡江县| 沾益县| 瑞安市| 舞阳县| 开鲁县| 黄浦区| 龙山县| 额尔古纳市| 招远市| 来安县| 曲周县| 张北县| 遵义市| 枣庄市| 收藏| 芦溪县| 精河县| 望谟县| 霍邱县| 临夏县| 浦东新区| 平安县| 革吉县| 南投县| 大宁县|