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>

赞 (0)

相关推荐

  • select多选 multiple的使用示例

    复制代码 代码如下: <html> <head> <script type="text/javascript"> function showDiv(id){ document.getElementById("selectOption").style.display="block"; document.getElementById("selectOption").style.position=

  • element-ui select多选绑定回显值问题

    目录 element-ui select多选绑定回显值 element-ui下拉多选数据回显时无法进行修改 解决方案 总结 element-ui select多选绑定回显值 这是要最后实现的效果. <el-form-item label="机组名称" prop="unitName"> <el-select v-model="unitName" multiple placeholder="请选择" @chang

  • Bootstrap select多选下拉框实现代码

    Bootstrap select多选下拉框实现代码

    前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cl

  • bootstrap table 多选框分页保留示例代码

    bootstrap table 多选框分页保留示例代码

    在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据. 解决思路: 在分页的时候,吧原先选择的数据用一个全局变量保存,当再次翻页回来时,判断当前页数据是否存在于保存的数据数组中,存在则状态为选择.当然当取消选择的时候也要去删除数组中相应的数据. 为了解决这个问题,在查github上查文档发现有人提出了这个问题,并且作者wenzhixin

  • jquery select多选框的左右移动 具体实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv=&quo

  • ReactJS实现表单的单选多选和反选的示例

    本文介绍了ReactJS实现表单的单选多选和反选的示例,分享给大家,希望对大家有所帮助. 需求是对列表实现单选,反选和多选,全部清除的操作 ...... this.state = { //初始化空数组,表示已经选择的 selectedStores:[], } ...... handleClick(e){ const newSelection = e.target.value;//拿到点击的具体一项 let newSelectionArray;//新建一个空数组 //判断点击项是否为选择状态,是的

  • Vue + element 实现多选框组并保存已选id集合的示例代码

    Vue + element 实现列表复选框并保存已选id集合 1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源 2.初始化tableData集合 3.循环遍历需要显示得值 4.在多选框组上添加chang事件 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', addre

  • Linux下Select多路复用实现简易聊天室示例

    Linux下Select多路复用实现简易聊天室示例

    目录 前言 多路复用的原理 基本概念 select fd_set 服务器Code 客户端Code 效果演示 select服务器 客户端Ⅰ 客户端Ⅱ 前言 和之前的udp聊天室有异曲同工之处,这次我们客户端send的是一个封装好了的数据包,recv的是一个字符串,服务器recv的是一个数据包,send的是一个字符串,在用户连接的时候发送一个login请求,然后服务器端处理,并广播到其他客户端去 多路复用的原理 基本概念 多路复用指的是:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读

  • JS实现电影票选座的项目示例

    JS实现电影票选座的项目示例

    简单模拟电影票选座,详细代码如下: 利用js实现给li标签添加和取消属性,来实现选座功能. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

  • 两个select多选模式的选项相互移动(示例代码)

    如下所示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

随机推荐