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 相关文章推荐
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
一个可以增加和删除行的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函数代码
2010/04/22 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
js查找父节点的简单方法
2008/06/28 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
什么是方法的重载
2013/06/24 面试题
高等教育学自荐书范文
2014/02/10 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
图文详解nginx日志切割的实现
2022/01/18 Servers