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 相关文章推荐
jquery简单体验
Jan 10 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
JavaScript oncopy事件用法实例解析
May 13 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 中include()与require()的对比
2006/10/09 PHP
javascript 获取图片颜色
2009/04/05 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
javascript基础知识
2016/06/07 Javascript
javascript回到顶部特效
2016/07/30 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
python简单操作excle的方法
2018/09/12 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
某公司.Net方向面试题
2014/04/24 面试题
社区国庆节活动方案
2014/02/05 职场文书
应届生自荐信范文
2014/02/21 职场文书
教师党员承诺书
2014/03/25 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python