html中怎样实现具有下拉效果的多选框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中怎样实现具有下拉效果的多选框相关的知识，希望对你有一定的参考价值。
我现在做html页面，用到了select多选框 ，但是多选框站的面积太大，能否实现单选框效果 ，单击一下出来下拉框。多选框时按着ctrl可以进行多选。
这样能实现吗 ？望高手指点
我想做的是：在页面上多选select和单选一样，当我们单击的时候出现下拉框，不单击的时候只显示一条记录。
因为现在的多选select下面是一个区域，占了大量的页面空间，不美观
<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即可。
利用easyui-combotree实现 下拉菜单 多选功能（带多选框）
最终的效果图 原easyui-combotree样式
Html
<select id="select_order_type" name="select_order_type" class="easyui-combotree" multiple style="width:140px;"></select>
JavaScript
其中 <{$select_option_order_type}> 为 php后端 Smarty 赋值 例： { "id":1, "text":"订机" }, { "id":2, "text":"My BBBBB" }, { "id":3, "text":"My CCCCC" }
注意：双引号 必须要有
//easyui-combotree 加载数据 $("#select_order_type").combotree({ data: [ <{$select_option_order_type}> ] }); //页面加载完成后执行 $(document).ready(function(){ //easyui-combotree 去掉图标 $(".tree-icon,.tree-file").removeClass("tree-icon tree-file"); $(".tree-icon,.tree-folder").removeClass("tree-icon tree-folder tree-folder-open tree-folder-closed"); });
//EasyUI Combotree 获取所有选中的节点 function getCombotreePropValues(combotreeId){ var result = ""; var tr= $("#"+combotreeId).combotree(‘tree‘); var nodes = tr.tree(‘getChecked‘); if(nodes.length > 0){ for(var i=0; i<nodes.length; i++){ //console.log(nodes[i] ); //result += nodes[i].id + ":"+nodes[i].text + "," ; //1:My AAAAA,2:My BBBBB,3:My CCCCC result += nodes[i].text + "," ; } if(result.indexOf(",") > -1){ result = result.substring(0, result.length - 1); } } return result; };
取值
//easyui-combotree 获取选中值 var order_type=getCombotreePropValues("select_order_type");
如果不选 则返回 空
如果选一个 则返回 一个值没有逗号 如 订机
如果选两个及以上 则返回多个值用 逗号分隔 如 订机,投诉,咨询
以上是关于html中怎样实现具有下拉效果的多选框的主要内容，如果未能解决你的问题，请参考以下文章