select多选 multiple的使用示例


Posted in Javascript onJune 16, 2014
<html> 
<head> 
<script type="text/javascript"> 
function showDiv(id){ document.getElementById("selectOption").style.display="block"; 
document.getElementById("selectOption").style.position="absolute"; 
document.getElementById("selectOption").style.top=document.getElementById(id).offsetTop+25; 
document.getElementById("selectOption").style.left=document.getElementById(id).offsetLeft+20; 
} 
function selectM() 
{ 
var obj = document.getElementById("mySelect"); 
alert(obj.selectedIndex); 
} 
function checkselect(objname){ 
o = document.getElementById(objname); 
t = document.getElementById("output"); 
var intvalue=""; 
for(i=0;i<o.length;i++){ 
if(o.options[i].selected){ 
intvalue+=o.options[i].value+","; 
} 
} 
t.value=intvalue.substr(0,intvalue.length-1); 
alert(intvalue); 
} 
</script> 
</head> 
<body> 
<form> 
<div id="selectOption" style='width:100px;height:50px;z-index:100;border:1px solid #0099FF;background:#cccccc;display:none;'> 
<select id="mySelect" multiple="multiple" size="4"> 
<option value='苹果'>苹果</option> 
<option value='桃子'>桃子</option> 
<option value='香蕉'>香蕉</option> 
<option value='桔子'>桔子</option> 
</select> 
<input type="button" onclick="checkselect('mySelect')" value="checkselect"> 
</div> 
选中的项目:<input type="text" name="output"> 
<input id="lalla" type="button" onclick="showDiv(this.id)" value="选择"> 
<br/>
</form> 
<p>在您点击 “选择多个” 按钮之前,请尝试同时选取多个选项。在点击 “选择多个” 按钮之后,请再试一次。</p>
</form> 
</body> 
</html>
Javascript 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 #Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 #Javascript
Js实现滚动变色的文字效果
Jun 16 #Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 #Javascript
Javascript图片上传前的本地预览实例
Jun 16 #Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 #Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 #Javascript
You might like
php中对2个数组相加的函数
2011/06/24 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
tab栏切换原理
2017/03/22 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python频繁写入文件时提速的方法
2019/06/26 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
工作会议欢迎词
2014/01/16 职场文书
创业计划书如何编写
2014/02/06 职场文书
境外导游求职信
2014/02/27 职场文书
一年级学生期末评语
2014/04/21 职场文书
幸福中国演讲稿
2014/09/12 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python