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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
js 用于检测类数组对象的函数方法
May 02 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
杏林同学录(一)
2006/10/09 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python实现键盘控制鼠标移动
2020/11/27 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
python中append函数用法讲解
2020/12/11 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
公司拓展活动方案
2014/02/13 职场文书
员工安全承诺书
2014/05/22 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
电子商务实训报告总结
2014/11/05 职场文书
学生检讨书
2015/01/27 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
Django框架中视图的用法
2022/06/10 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL