html中怎样实现具有下拉效果的多选框
我现在做html页面，用到了select多选框 ，但是多选框站的面积太大，能否实现单选框效果 ，单击一下出来下拉框。多选框时按着ctrl可以进行多选。
这样能实现吗 ？望高手指点
我想做的是：在页面上多选select和单选一样，当我们单击的时候出现下拉框，不单击的时候只显示一条记录。
因为现在的多选select下面是一个区域，占了大量的页面空间，不美观
第1个回答 推荐于2017-12-15
select标记有一个属性multiple，将其设置成multiple="multiple"按住Ctrl键即可实现多选。 请看例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function getValue()
{
var s = "";
for(var i=0;i<form1.ss.options.length;i++)
{
if(form1.ss.options[i].selected)
{
s+=form1.ss.options[i].value;
}
}
alert(s);
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
请选择：
<select id="ss" name="ss" size="5" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<input type="button" name="Submit" value="提交" onclick="getValue()" />
</form>
</body>
</html>
**************************补充**********************
修改select标签的size属性，把它的值改为1即可。本回答被网友采纳
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function getValue()
{
var s = "";
for(var i=0;i<form1.ss.options.length;i++)
{
if(form1.ss.options[i].selected)
{
s+=form1.ss.options[i].value;
}
}
alert(s);
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
请选择：
<select id="ss" name="ss" size="5" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<input type="button" name="Submit" value="提交" onclick="getValue()" />
</form>
</body>
</html>
**************************补充**********************
修改select标签的size属性，把它的值改为1即可。本回答被网友采纳
相似回答
