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 hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vuex存储token示例
Nov 11 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
在VUE style中使用data中的变量的方法
Jun 19 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 中使用随机数的三个步骤
2006/10/09 PHP
PHP中用hash实现的数组
2011/07/17 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
php实现分页显示
2015/11/03 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php时间戳转换代码详解
2019/08/04 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
在Python下尝试多线程编程
2015/04/28 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python中的句柄操作的方法示例
2019/06/20 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
机械电子工程专业推荐信范文
2013/11/20 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
家庭经济困难证明
2015/06/23 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书