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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
详解nvm管理多版本node踩坑
Jul 26 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
Underscore源码分析
2015/12/30 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
js面向对象编程总结
2017/02/16 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python selenium 获取接口数据的实现
2020/12/07 Python
中学门卫岗位职责
2013/12/26 职场文书
企业总经理职责
2014/02/02 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
工作表扬信范文
2015/01/17 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书