基于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