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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
详解php中的implements 使用
2017/06/13 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python pygame实现2048游戏
2018/11/20 Python
浅谈react路由传参的几种方式
2021/03/23 Javascript
结婚典礼证婚词
2014/01/11 职场文书
四年级数学教学反思
2014/02/02 职场文书
中文教师求职信
2014/02/22 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
团组织推优材料
2014/12/29 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python