JQuery实现类似时间安排的表格带下拉选择框

具体就是一个4*4表格，每个格都是一个输入框，当点击时会在输入框下显示一个选择列表。我不想拉16个下拉控件，因为太浪费资源了，所以我想用JQuery实现点击时显示一个选择列表，选择完就隐藏。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

表格类似这样：
<table class="style1">
            <tr>
                <td>
                    <input id="Text1" type="text" /> </td>
                <td>
                    <input id="Text2" type="text" /> </td>
                <td>
                    <input id="Text3" type="text" /> </td>
                <td>
                    <input id="Text4" type="text" /> </td>
            </tr>
            <tr>
                <td>
                    <input id="Text5" type="text" /> </td>
                <td>
                    <input id="Text6" type="text" /> </td>
                <td>
                    <input id="Text7" type="text" /> </td>
                <td>
                    <input id="Text8" type="text" /> </td>
            </tr>
        </table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
$("#style1 :text").click(function(){ $("#test").css({display:"block",position:"absolute",left:$(this).offset().left+"px",top:($(this).offset().top+$(this).height()+4).toString() + "px"})
});
});
</script>
    </head>
    <body>
<table id="style1">
  <tr>
  <td>
  <input id="Text1" type="text" /> </td>
  <td>
  <input id="Text2" type="text" /> </td>
  <td>
  <input id="Text3" type="text" /> </td>
  <td>
  <input id="Text4" type="text" /> </td>
  </tr>
  <tr>
  <td>
  <input id="Text5" type="text" /> </td>
  <td>
  <input id="Text6" type="text" /> </td>
  <td>
  <input id="Text7" type="text" /> </td>
  <td>
  <input id="Text8" type="text" /> </td>
  </tr>
  </table>

  <select id="test" style="display:none">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
  </select>
    </body>
</html>
那是suggest的做法
你把select换成你构造的一个div模拟的就可以了
可以参考autocomplete
我现在没时间写了~~你自己找下吧
邓肯哥，我使用了jquery-ui-1.8.2.custom.min.js里头的autocomplete，能实现自动提示的功能，但我现在是想鼠标点击时列表全部显示出来，而不是根据输入的显示相关的。我想请问下应该如何修改？
$("#test").click(function(){
                      $("#test").css({
                      display:"none"});
                });
$("#XXXX li").click(function()
{
var xx=$(this).html();
alert(xx);
})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
        <script type="text/javascript">
            $(function(){
var testEle;
                $("#style1 :text").click(function(){                    $("#divtest").css({display:"block",position:"absolute",left:$(this).offset().left+"px",top:($(this).offset().top+$(this).height()+4).toString() + "px"})
    testEle=$(this);
                });

$("#divtest li").mouseover(function(){
$(this).addClass("liback");
}).mouseout(function(){
$(this).removeClass("liback");
}) $("#divtest li").click(function(){
var xx=$(this).html();
testEle.val(xx);
$("#divtest").hide();
})
            });
        </script>
<style>
#divtest{
background-color:#ADFF2F;
width:70px;
border:1px solid #4B0082;
padding:0px;
}
#divtest ul{
margin:0px;
padding:0px;

}
#divtest li{
list-style-type:none;

}
.liback{
background:#FFDEAD;
}
</style>
    </head>
    <body>
        <table id="style1">
          <tr>
          <td>
          <input id="Text1" type="text" /> </td>
          <td>
          <input id="Text2" type="text" /> </td>
          <td>
          <input id="Text3" type="text" /> </td>
          <td>
          <input id="Text4" type="text" /> </td>
          </tr>
          <tr>
          <td>
          <input id="Text5" type="text" /> </td>
          <td>
          <input id="Text6" type="text" /> </td>
          <td>
          <input id="Text7" type="text" /> </td>
          <td>
          <input id="Text8" type="text" /> </td>
          </tr>
          </table>

          <select id="test" style="display:none">
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
            <option>1</option>
          </select>
<div id="divtest" style="display:none">
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
</div>
    </body>
</html>
这种情况获取Li只需设置个全局变量，focus该文本框时记录Li位置标记，选中Li时赋值给该标记。