基于bootstrap的下拉选择 ( combox ) 输入 ( input ) 功能
需求：
在编辑数据的时候，既可以让用户输入，也可以从下拉框中选择
思路:
参照下面的效果图，因为是表格里面的数据，所以下拉框触发按钮和输入框分别为1列，输入列可以设置是否输入(方法:<td contenteditable="true">)。图中没有设置输入，因为班级是value,name形式的，只能选择。
环境：
Chrome+Jquery+bootstrap+HTML5
效果图：
代码：
<html>
<head>
<title>Table下拉选择输入框</title>
<link href="../lib/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="../lib/bootstrap-3.3.7/js/jquery-3.1.1.min.js"></script>
<script src="../lib/bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<style>
.combox-select-div{
line-height: 30px;
border-bottom: 1px solid #ccc;
height:30px;
width:100%;
cursor:pointer;
text-align: center;
border-buttom:solid 1px gray;
}
.combox-select-div:hover{
background-color: #ccc;
}
.td-comboxdiv
{
display:none;
width:134px;
height:200px;
background-color:white;
overflow:auto;
overflow-y:scroll;
position:absolute;
z-index:1000;
box-shadow:0 6px 12px rgba(0,0,0,.175);
}
</style>
<script>
$(document).ready(function(){
//填充数据
for(var i=1;i<10;i++)
{
str = [
'<tr id="row_'+i+'">',
'<td >小明'+i+'</td>',
'<td>男</td>',
'<td >2'+i+'</td>',
'<td name="'+i+'" style="background-color:white;width:100px;border-right: 0px solid #ccc;">GIS120'+i+'</td>',
'<td style="padding:0px;background-color:white;border-left: 0px solid #ccc;width:34px"><button onclick="createDropSelect(this)" type="button" style="margin:1px;float:right;height: 34px;" class="btn btn-default dropdown-toggle"><span class="caret"></span></button></td>',
'<td>',
'<a class="glyphicon glyphicon-floppy-disk size16" style="cursor:pointer" title="保存" onclick="saveUpdateLabelDate(this)"></a>',
'</td>',
'</tr>'
];
var tbstr=str.join('');
$('#TempDialogTable').append(tbstr);
}
});
//点击下拉按钮弹出班级下拉框
function createDropSelect(btobj){
var comboxobj=$('#modalLabelCombox');
var display =comboxobj.css('display');
var index=btobj.parentNode.parentNode.offsetTop;
var left=btobj.parentNode.offsetLeft;
var rowId=btobj.parentNode.parentNode.id;
if(display=="none")
{
comboxobj.css({"left":left-100,"top":index+40,"display":"block"});
}
else
{
comboxobj.css("display","none");
}
var str=""
for(var i=1;i<10;i++)
{
str+='<div value='+i+' onclick="getDropSelectValue('+rowId+',this)" class="combox-select-div">GIS120'+i+'</div>';
}
comboxobj.html(str);
}
//将选择的班级信息填入到班级列中
function getDropSelectValue(rowId,selecttext){
$(rowId.cells[3]).attr("name",$(selecttext).attr("value"));
rowId.cells[3].innerText=selecttext.innerText;
$('#modalLabelCombox').css("display","none");
}
//点击保存获取班级信息
function saveUpdateLabelDate(bdom){
var aleteRow=bdom.parentNode.parentNode;
var lbId=aleteRow.cells[0].innerText; //姓名
var tagid=$(aleteRow.cells[3]).attr("name"); //班级编号
alert("班级编号:"+tagid);
}
</script>
<body >
<div class="td-comboxdiv" id="modalLabelCombox"></div>
<table id="TempDialogTable" class="table table-striped table-bordered" >
<thead style="background-color:#E7E6E6;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th colspan=2>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
博客源址:http://www.cnblogs.com/GIScore/p/7244227.html
基于bootstrap的下拉选择 ( combox ) 输入 ( input ) 功能的更多相关文章
- 基于Bootstrap的下拉框插件bootstrap-select
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- Bootstrap系列 -- 15. 下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器
一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...
- Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- select2 智能补全模糊查询select2的下拉选择框使用
我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板 基础项目源码下载地址为: SpringMV ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
随机推荐
- H3C MP-Group方式配置PPP MP
- 深入理解 Embedding层的本质
继上文https://blog.csdn.net/weixin_42078618/article/details/82999906探讨了embedding层的降维效果,时隔一个月,分享一下嵌入层在NP ...
- win10 uwp 依赖属性
本文告诉大家如何使用依赖属性,包括在 UWP 和 WPF 如何使用. 本文不会告诉大家依赖属性的好处,只是简单告诉大家如何使用 在 UWP 和 wpf ,如果需要创建自己的依赖属性,可以使用代码片,在 ...
- 在CentOS7上安装ftp服务器用于保存服务端上传的图片。
1.CentOS卸载vsftpd的方法 如果服务器上已经安装了vsftpd服务,配置出错需要卸载vsftpd服务. 1.1 查找vsftpd服务 [root@localhost /]# rpm -aq ...
- [转]Node.js中package.json中^和~的区别
webpack 项目的package.json 文件列出了项目所依赖的插件和库,同时也给出了对应的版本说明,但是在版本说明前面还有个符号:'^'(插入符号)和'~'(波浪符号),总结了下他们之间的区别 ...
- Vue 循环为选中的li列表添加效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...
- java 自动关闭资源的try语句
Java 7简化资源清理(try-with-resources)自动关闭资源的try语句 自动关闭资源格式: try( )//此处多了圆括号,()圆括号内写打开资源的代码,在这里创建的对象必须实现Au ...
- 【u221】分数
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 高考分数刚刚公布.共有n人参加考试,为了便于填报志愿,教育部把所有考生的成绩平均分为m档.保证n是m的 ...
- [学习笔记]Pollard-Rho
之前学的都是假的 %%zzt Miller_Rabin:Miller-Rabin与二次探测 大质数分解: 找到所有质因子,再logn搞出质因子的次数 方法:不断找到一个约数d,递归d,n/d进行分解, ...
- 性能测试基础-SOCKET协议用例
1.首先在进行性能测试的时候,我们要了解软件的通信协议是什么,我们使用什么协议,如何去模拟.SOCKET协议主要应用于在C/S模式的系统. 作者本人已当初做过的C/S架构的系统做的脚本录制,在上面做脚 ...