select多选 multiple的使用示例
更新时间：2014年06月16日 15:52:31 投稿：whsnow
使用multiple可以实现select多选，本例将为大家介绍下select多选 multiple的使用，新手朋友们可以学习下
复制代码 代码如下:
<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实现图片懒加载的方法及思路，有时我们需要用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了ES6 系列之 Generator 的自动执行的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本文主要介绍了js获取异步函数数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现可拖拽模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Javascript实现图片轮播效果(二)图片序列节点的控制实现
这篇文章主要介绍了Javascript实现图片轮播效果(二)图片序列节点的控制实现的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要为大家详细介绍了js实现简单放大镜特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单。接下来通过本文给大家介绍Bootstrap表单布局实例代码详解，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
妙用Bootstrap的 popover插件实现校验表单提示功能
最近使用bootstrap开发项目比较多，在表单校验功能中用popover插件实现出错提示功能很方面，下面小编给大家带来了一篇关于Bootstrap的 popover插件实现校验表单提示功能的实现代码，非常不错，感兴趣的朋友一起看看吧2016-08-08
这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
javascript document.compatMode兼容性
文档模式在开发中貌似很少用到，最常见的是就是在获取页面宽高的时候，比如文档宽高，可见区域宽高等。2010-02-02
最新评论