需求：

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

思路:

参照下面的效果图，因为是表格里面的数据，所以下拉框触发按钮和输入框分别为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. redux【react】

    首先介绍一下redux就是Flux的一种进阶实现.它是一个应用数据流框架,主要作用应用状态的管理 一.设计思想: (1).web应用就是一个状态机,视图和状态一一对应 (2).所有的状态保存在一个对象 ...

  2. SVG和canvas画图，js求数组最大最小值

    windows命令行的内容怎么复制,右键选择标记,选中内容后再点击鼠标右键就复制了. 安装Node.js后再用npm install命令会出现如下warn:saveError ENOENT: no s ...

  3. Python--day68--Django ORM的字段参数、元信息

    字段参数 null 用于表示某个字段可以为空. unique 如果设置为unique=True 则该字段在此表中必须是唯一的 . db_index 如果db_index=True 则代表着为此字段设置 ...

  4. 2018-8-10-win10-uwp-获得元素绝对坐标

    title author date CreateTime categories win10 uwp 获得元素绝对坐标 lindexi 2018-08-10 19:16:51 +0800 2018-2- ...

  5. Spring Boot笔记之邮件（spring-boot-starter-mail）

    Spring Boot环境中发送邮件 pom.xml引入`spring-boot-starter-mail` application.yml配置 163邮箱 QQ邮箱 Gmail邮箱 发送邮件 ser ...

  6. HDU 3746 Cyclic Nacklace(kmp next数组运用)

    Cyclic Nacklace Problem Description CC always becomes very depressed at the end of this month, he ha ...

  7. Linux 字节序

    小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高 级的平台以另一种方式(大端)工作. 任何可能的时候, 你的代码应当这样来编写, 它不在 乎它操作的数据的字节序 ...

  8. linux 操作 I/O 端口

      在驱动硬件请求了在它的活动中需要使用的 I/O 端口范围之后, 它必须读且/或写到这些 端口. 为此, 大部分硬件区别 8-位, 16-位, 和 32-位端口. 常常你无法混合它们, 象你 正常使 ...

  9. Sql Server知识点拨

    一.Sql Server异常捕获try catch 二.集增加与修改的存储过程 三.显示某一列中有重复值的行 转载自:https://www.cnblogs.com/527289276qq/

  10. linux安装python3.*，更换Python2.*

    下载并解压:Python-3.5.7.tgz [root@AH-aQYWTYSJZX01 python3]# ll total 20268 -rw-r----- 1 temp01 temp01 207 ...