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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
Python map和reduce函数用法示例
2015/02/26 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
通过自学python能找到工作吗
2020/06/21 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
普天C++笔试题
2016/03/20 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android