JavaScript解决select下拉框中的内容太长显示不全的问题
1、说明
有些情况下，select下拉框的内容过长，导致部分看不见；
现在通过鼠标事件，让下拉框中的内容显示完全
2、实现源码
<!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>JavaScript解决select下拉框中的内容太长显示不全的问题</title>
<script type="text/javascript">
/**
* 自动设置select下拉框的宽度
*/
function autoWidth()
{
//获取select中的ID
var selectId = document.getElementById("select_option");
//自动设置下拉框的宽度
selectId.style.width = 'auto';
}
/**
* 设置select下拉框的宽度
*/
function setWidth()
{
//获取select中的ID
var selectId = document.getElementById("select_option");
//设置select下拉框的宽度为120
selectId.style.width = "120px";
}
</script>
</head>
<body>
<div id="select_div">
<select id="select_option"
onmousedown="autoWidth()"
onblur="setWidth()"
onchange="setWidth()">
<option value="0">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option value="1">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
<option value="2">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</option>
<option value="3">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option>
<option value="4">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>
<option value="5">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option>
<option value="6">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</option>
<option value="7">HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</option>
<option value="8">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option>
<option value="9">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</option>
</select>
</div>
</body>
</html>
3、实现结果
（1）初始化时
（2）选中第三项
JavaScript解决select下拉框中的内容太长显示不全的问题
时间： 2024-10-12 12:36:49