select 下拉列表框 css样式 长度问题
<select>下拉框的默认长度是<option>标签定义的值中最长的那个，如下图：
然后设置固定with，发现遨游浏览器是好了，如图：
https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/jinglingydd/pic/item/1430d6146c443a6c4890a761.jpg
但是，可恶的ie6，把列表框截了，看不全！如图：
https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/jinglingydd/pic/item/b0acc430a9916895184cff77.jpg
网上说：通过JS改变下拉框在IE下的行为。当用户点击下拉框时，将<select>的width属性设为auto，从而让下拉框的长度变长到能显示所有值；当用户点击后，又将下拉框的长度恢复到设置的固定值。 虽然在IE下，下拉框的行为有点诡异，但至少能工作。 但是js我用不起来。
求助求助！满意加分！
默认是这样的，你想修改长度还是想解决什么问题。
如果是想修改长度，<select style="width:设置你想要的长度">
这样就可以修改长度了
如果是想修改长度，<select style="width:设置你想要的长度">
这样就可以修改长度了
温馨提示：答案为网友推荐，仅供参考
第1个回答 2011-09-09
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" >
function yc(){
var thisselect = document.getElementById("bbbb");
thisselect.style.display="none";
}
function myChange(o)
{
var thisselect = document.getElementById("bbbb");
thisselect.style.display="block";
thisselect.focus();
}
function myBlur(){
}
function getData(){
var a1=document.getElementById("bbbb");
var b1=document.getElementById("aaaa");
b1.options[b1.selectedIndex].value =a1.options[a1.selectedIndex].value
b1.options[b1.selectedIndex].text=a1.options[a1.selectedIndex].text
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<select name="select" style="width:80px" id="aaaa" name="aaaa" onclick="myChange(this)" >
<option value="1">香蕉</option>
</select>
</p>
<p>
<select name="select" size="5" style="display:none;width:80px" id="bbbb" name="bbbb" onchange="getData()" onblur="yc()">
<option value="1">香蕉</option>
<option value="2">苹果</option>
<option value="3">梨子</option>
<option value="4">葡萄</option>
<option value="5">桔子</option>
<option value="7">椰子</option>
<option value="8">桃子</option>
<option value="9">荔枝</option>
<option value="10">龙眼</option>
</select>
</p>
</form>
</body>
</html>
追问
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" >
function yc(){
var thisselect = document.getElementById("bbbb");
thisselect.style.display="none";
}
function myChange(o)
{
var thisselect = document.getElementById("bbbb");
thisselect.style.display="block";
thisselect.focus();
}
function myBlur(){
}
function getData(){
var a1=document.getElementById("bbbb");
var b1=document.getElementById("aaaa");
b1.options[b1.selectedIndex].value =a1.options[a1.selectedIndex].value
b1.options[b1.selectedIndex].text=a1.options[a1.selectedIndex].text
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<select name="select" style="width:80px" id="aaaa" name="aaaa" onclick="myChange(this)" >
<option value="1">香蕉</option>
</select>
</p>
<p>
<select name="select" size="5" style="display:none;width:80px" id="bbbb" name="bbbb" onchange="getData()" onblur="yc()">
<option value="1">香蕉</option>
<option value="2">苹果</option>
<option value="3">梨子</option>
<option value="4">葡萄</option>
<option value="5">桔子</option>
<option value="7">椰子</option>
<option value="8">桃子</option>
<option value="9">荔枝</option>
<option value="10">龙眼</option>
</select>
</p>
</form>
</body>
</html>
追问
可行，谢谢！但是选好后，那个下拉框要点一下旁边才会消失。
本回答被提问者采纳第2个回答 2019-01-03
默认option长度不可控制，要想改只能自己模拟表单，不想写就用插件 Dselector简单好用！