需求：

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

思路:

参照下面的效果图，因为是表格里面的数据，所以下拉框触发按钮和输入框分别为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. 2015-2016 ACM-ICPC Southwestern Europe Regional Contest (SWERC 15)

    C. Canvas Painting 合并果子. E. Wooden Signs \(dp(i,l,r)\)表示第\(i\)块木板的长度区间为\([l,r]\)的方案数,根据题意,\(l\)或\(r\ ...

  2. sorted排序算法

  3. 2019-2-28-C#-16-进制字符串转-int-

    title author date CreateTime categories C# 16 进制字符串转 int lindexi 2019-02-28 11:51:36 +0800 2018-04-2 ...

  4. Layout 实现三栏布局的几种方法

    https://github.com/ljianshu/Blog/issues/14    布局参考 https://github.com/ljianshu/Blog/issues/38  响应式那点 ...

  5. Django入门8--Templates过滤器

    过滤器大大减少了开发的代码量

  6. Spring Cloud探路（一） Erueka服务器的建立

    组件名:Netflix Eureka  作用:支撑微服务的自注册.自发现,提供负载均衡能力 开发环境使用IDEA 1.新建Eureka Server,新建maven项目,配置pom.xml <p ...

  7. HDU 1540 Tunnel Warfare (线段树）

    Tunnel Warfare Problem Description During the War of Resistance Against Japan, tunnel warfare was ca ...

  8. WPF 解决弹出模态窗口关闭后，主窗口不在最前

    本文告诉大家如何解决这个问题,在 WPF 的软件,弹出一个模态窗口.使用另一个窗口在模态窗口前面.从任务栏打开模态窗口.关闭模态窗口.这时发现,主窗口会在刚才使用的另一个窗口下面 这是 Windows ...

  9. idea启用列模式的方式小结

    (1)alt+鼠标左键----实现的是几个连续列要向上或者向下拉,能够同时操作多行数据. (2)Shift+alt+鼠标左键----可以实现点选跨行的列模式同时操作,而且不通行可以点选不通列,进行跨行 ...

  10. C# 从零开始写 SharpDx 应用 笔刷

    本文告诉大家如何在 SharpDx 里面使用笔刷,包括纯色笔刷.渐变笔刷和图片笔刷 本文属于 SharpDx 系列 博客,建议从头开始读 初始化 本文将会在 C# 从零开始写 SharpDx 应用 初 ...