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 脚本将当地时间转换成其它时区
Mar 19 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
javascript操作cookie
Jan 17 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 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创建多级目录)
2014/03/04 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
javascript 对象的定义方法
2007/01/10 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python中kmeans聚类实现代码
2018/02/23 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
django settings.py 配置文件及介绍
2019/07/15 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
港澳通行证委托书怎么写
2014/08/02 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
家长通知书家长意见
2015/06/03 职场文书
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript