需求：

在编辑数据的时候，既可以让用户输入，也可以从下拉框中选择

思路:

参照下面的效果图，因为是表格里面的数据，所以下拉框触发按钮和输入框分别为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 ) 功能的更多相关文章

  1. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  2. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  3. Bootstrap系列 -- 15. 下拉选择框select

    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...

  4. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  5. 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  6. Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  7. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  8. select2 智能补全模糊查询select2的下拉选择框使用

    我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板 基础项目源码下载地址为: SpringMV ...

  9. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

随机推荐

  1. 2019-1-16-git-subtree-pull-错误-Working-tree-has-modifications

    title author date CreateTime categories git subtree pull 错误 Working tree has modifications lindexi 2 ...

  2. ImportError: DLL load failed: 找不到指定的模块。 TensorFlow 1.13

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zhenlingcn/article/details/88647288问题描述 问题环境TensorF ...

  3. JS开发常用工具函数 总结

    js原生工具库 1.isStatic:检测数据是不是除了symbol外的原始数据 */ function isStatic(value) { return( typeof value === 'str ...

  4. SDNU ACM-ICPC 2019 Competition For the End of Term(12-15)山师停训赛题解

    马鸿儒 目前已补:01 03 06 07 08 09 10 11目前未补:02 04 05 12 苏用 1582.柳予欣的舔狗行为 1587.柳予欣的女朋友们在分享水果 1585.柳予欣和她女朋友的购 ...

  5. Vue与React比较

    与React 相似: (1)虚拟DOM(Virtual DOM) 虚拟DOM的诞生是基于:改变真实的DOM状态远比改变一个JS对象的花销要大的多. 虚拟DOM是一个映射真实DOM的JS对象,当有变化产 ...

  6. Spring Security 学习笔记-securityContext过滤器过滤链学习

    web.xml配置委托代理filter,filter-name默认与filter bean的名字保持一致. <filter> <filter-name>springSecuri ...

  7. C++ 驱动开发 error LNK2019

    最近在写一个机器人的时候,发现驱动无法编译通过.本文告诉大家如何解决这个问题. 在 VisualStudio 2017 15.8 的版本提供新的功能C++ Just My Code Stepping ...

  8. dotnet 控制台 Hangfire 后台定时任务

    本文告诉大家如何在 dotnet core 的控制台通过 Hangfire 开启后台定时任务 首先需要安装 HangFire 这个 Nuget 库,通过这个库可以用来做定时任务,虽然很多时候都是在 A ...

  9. GapMinder气泡图:在线互动图表数据平台

    GapMinder:在线互动图表数据平台是一个将国际统计数据转换成活动的.交互的和有趣的图表,以在线统计数据为基础的互动图表集的完美世界.目的是通过增进对可以自由访问的公共统计数据的使用和理解,以促进 ...

  10. Jquery xhr2跨域

    相关享目托管在github: https://github.com/devgis/CSharpCodes