基于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() 就可以 ...
随机推荐
- data-属性的作用
data-用于存储页面或应用程序的私有自定义数据,赋予我们在所有HTML元素上嵌入自定义data属性的能力,存储的数据能被页面的JS利用,以创建更好的用户体验. <div id="bo ...
- Netty进行文件传输
本次是利用TCP在客户端发送文件流,服务端就接收流,写入相应的文件. 实验的源文件是一个图片,假设地址是D:\\Koala.jpg,接收保存后的图片为D:\\test.jpg 原理就是将文件读取成by ...
- win10 uwp 手把手教你使用 asp dotnet core 做 cs 程序
本文是一个非常简单的博客,让大家知道如何使用 asp dot net core 做后台,使用 UWP 或 WPF 等做前台. 本文因为没有什么业务,也不想做管理系统,所以看到起来是很简单. Visua ...
- Python--day61--安装Django,Django项目的启动和设置运行端口和关闭运行端口
0,安装Django 1,Django项目的启动 2,设置运行端口和关闭运行端口
- 设置html各元素不可点击(持续更新)
1.span <span id="nextStep" onclick="right">下一页</span> $("#nextS ...
- [Atom 编辑器 ] Packages
Atom包 https://atom.io/packages 常用包整理: atom-chinese-menu 中文插件 atom-ternjs 对 es5,es6的语法支持 ato ...
- H3C 环路避免机制四：定义最大值
- Laravel报错Call to undefined function Illuminate\Encryption\openssl_cipher_iv_length()
nginx: 在phpstudy中运行Laravel一键安装包时报错:Call to undefined function Illuminate\Encryption\openssl_cipher_i ...
- requires php ~7.1 -> your PHP version (7.0.18) does not satisfy that requirement
一个大兄弟本地用了 PHP 7.1 进行开发,而我本地是 PHP 7.0, 于是悲剧发生了. composer install 之后报错 Loading composer repositories w ...
- redux.js的基本使用
1.先是安装reduxJx, cnpm i --save rudux 2.创建一个store的js文件 3.使用import来引用 redux import { createStore } from ...