select 下拉列表框 css样式 长度问题
<select>下拉框的默认长度是<option>标签定义的值中最长的那个，如下图：然后设置固定with，发现遨游浏览器是好了，如图：http://hiphotos.ba...
<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我用不起来。
求助求助！满意加分！ 展开
然后设置固定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我用不起来。
求助求助！满意加分！ 展开
3个回答
展开全部
默认是这样的，你想修改长度还是想解决什么问题。
如果是想修改长度，<select style="width:设置你想要的长度">
这样就可以修改长度了
如果是想修改长度，<select style="width:设置你想要的长度">
这样就可以修改长度了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
追问
可行，谢谢！但是选好后，那个下拉框要点一下旁边才会消失。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
默认option长度不可控制，要想改只能自己模拟表单，不想写就用插件 Dselector简单好用！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
