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中实现暂停的几篇文章
Mar 04 Javascript
jQuery参数列表集合
Apr 06 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
详细解读php的命名空间(一)
2018/02/21 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python制作词云的方法
2018/01/03 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Python rstrip()方法实例详解
2018/11/11 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python 内置函数汇总详解
2019/09/16 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
2014年五一活动策划方案
2014/03/15 职场文书
国际会计专业求职信
2014/08/04 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
银行资信证明
2015/06/17 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL