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 拖拉缩放效果
Dec 10 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue实现键盘输入支付密码功能
Aug 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 数据库字段复用的基本原理与示例
2011/07/22 PHP
解析link_mysql的php版
2013/06/30 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python黑魔法之编码转换
2016/01/25 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
医学实习生自我鉴定
2013/12/12 职场文书
暑期社会实践方案
2014/02/05 职场文书
党员公开承诺书
2014/03/25 职场文书
大学三年计划书范文
2014/04/30 职场文书
博士生专家推荐信
2014/09/26 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
字节飞书面试promise.all实现示例
2022/06/16 Javascript