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写的日历类(基于pj)
Dec 28 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 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文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
php实现的双色球算法示例
2017/06/20 PHP
jquery 插件学习(四)
2012/08/06 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
python 获取网页编码方式实现代码
2017/03/11 Python
Python实现两款计算器功能示例
2017/12/19 Python
Python实现多进程的四种方式
2019/02/22 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
房屋租赁意向书
2014/04/01 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
大学四年个人总结
2015/03/03 职场文书
工作态度不好检讨书
2015/05/06 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
vue特效之翻牌动画
2022/04/20 Vue.js