高手请进 —— select转成弹出div

<!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>
   <style type="text/css">
   </style>
    <script src="ec/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {
           $.fn.selectToDiv = function (selectId, colNum, fromFirstOption) {
               var $s = $("#" + selectId);
               //计算列数量
               var opCount = $s.find("option").length - (fromFirstOption ? 0 : 1);
               if (opCount < colNum)
                   colNum = opCount;               //计算行数量
               var rowNum = Math.ceil(opCount / colNum);
               var tabId = "table_" + selectId;
               var tabHtml = "<table  id='" + tabId + "'cellspacing='0' border='1' style='border-collapse:collapse;cursor:pointer;' >";
               var opIdx = fromFirstOption ? 0 : 1;
               for (var r = 0; r < rowNum; r++) {
                   tabHtml += "<tr>";
                   for (var c = 0; c < colNum; c++) {
                       if (opIdx <= opCount) {
                           var $o = $s.find("option:eq(" + (opIdx++) + ")");
                           tabHtml += "<td v=" + $o.val() + " >" + $o.text() + "</td>";
                       } else {
                           tabHtml += "<td> </td>";
                       }
                   }
                   tabHtml += "</tr>";
               }
               tabHtml += "</table>";
               $("#dT").append(tabHtml);               $("#" + tabId + " td[v]").click(function () {
                   $s.val($(this).attr("v"));
               });               $s.mouseover(function () {
                   $(this).attr("disabled", false); //这一步可以，但是移开之后，后面的mouseout就无效了，可能disabled之后，事件也被禁止了。
               });
               $s.mouseout(function () {
                   $(this).attr("disabled", true);
               }).change(function () {
                   return false;
               }).click(function () {
                   $("#dT").toggle();
                   return false;
               });
           }           $.fn.selectToDiv("selTest", 3, false);
       });
   </script>
</head>
<body>
   <select id="selTest">
       <option value="0">----请选择----</option>
       <option value="1">湖南</option>
       <option value="2">湖北</option>
       <option value="3">广东</option>
       <option value="4">广西</option>
       <option value="5">山东</option>
       <option value="6">山西</option>
       <option value="7">河南</option>
       <option value="8">河北</option>
       <option value="9">江西</option>
       <option value="10">安徽</option>
       <option value="11">四川</option>
       <option value="12">陕西</option>
       <option value="13">甘肃</option>
       <option value="14">宁夏</option>
       <option value="15">西藏</option>
       <option value="16">新疆</option>
       <option value="17">黑龙江</option>
       <option value="18">辽宁</option>
       <option value="19">吉林</option>
       <option value="20">福建</option>
       <option value="21">江苏</option>
       <option value="22">浙江</option>
   </select>
   <div id="dT" style="display:none;" ></div>
</body>
</html>目标功能：将select转变成下拉弹出层，点击select，不要弹出原来的列表，而是弹出一个div。
目前的问题：怎么禁止select弹出原来的列表？
不要告诉我不要用select，换成别的东西了，取值时比较麻烦的，对项目其它地方改动也太多了。
上面只是我做的一个半成品， ……

解决方案 »

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

楼主告诉我转成div 比直接用select 的好处在哪,我的理解，一个好处就是可以横向显示列表了，还有其它？
当数据量比较大时，比如有几十上百个item时，纵列的列表是不友好的。
你找个整套的UI解决方案，看一下人家都怎么做的就可以了嘛，extjs 跟jquery easyui都是这样的
你把弹出的DIV设为最上层试试, 用JQUERY的bgiframe插件,
这样它在最上层应该就替换掉了SELECT吧
把SELECT的高度设小,
可以试试用css div模仿select下拉框
写一个代理
完全把select隐藏掉
用div在select的原来位置替代显示和点击的事件
建设楼主试试插件，Chosen，我有个项目是用这个。
http://www.aqee.net/docs/Chosen/Chosen.htm
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <style>
     .option{
     background-color: white;
     }
     .optionHover{
     background-color: blue;
     color: white;
     }
    </style>
</head>
<body id="bd">
<form id="myform">
    <select id="sel">
        <option value="0">---请选择---</option>
        <option value="1">第一项</option>
        <option value="2">第二项</option>
    </select>
</form>
    <script>
     $.fn.wrap = function(){
     var pos = this.position(),
     div = $("<div/>"),
     panel = $("<div/>"),
     input = $("<input type=text />"),
     sel = this;
     input.val(this[0].children[this[0].selectedIndex].innerHTML);
     buildPanel(sel);
     panel.hide();
     div.append(input).append(panel);
     div.css({
     position: "absolute",
     top: pos.top,
     left: pos.left,
     "z-index": 1000,
     border: "1px solid gray"
     });
     div.insertBefore(this);
     this.css("visibility", "hidden");

     function buildPanel(sel){
     for(var i = 0, opts = sel.children(), len = opts.length; i < len; i++){
     var entry = $("<div/>").attr({
     "data-value": opts[i].value,
     "data-index": i,
     "class": "option"
     }).html(opts[i].innerHTML).appendTo(panel);
     }
     }

     input.focus(function(){
     panel.show();
     });
     $(document).click(function(event){
     var target = $(event.target);
     if(div.has(target).length === 0 && !div.is(target)){
     panel.hide();
     }
     });
     panel.click(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     input.val(target.attr("data-value"));
     sel.prop("selectedIndex", target.attr("data-index"));
     panel.hide();
     }
     }).mouseover(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     target.addClass("optionHover");
     }
     }).mouseout(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     target.removeClass("optionHover");
     }
     });
     }
     $("#sel").wrap();
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <style>
     .clear{
     clear: both;
     }
     .option{
     background-color: white;
     display: inline-block;
     float: left;
     }
     .optionHover{
     background-color: blue;
     color: white;
     }
    </style>
</head>
<body id="bd">
<form id="myform">
    <select id="sel">
        <option value="0">---请选择---</option>
        <option value="1">第1项</option>
        <option value="2">第2项</option>
        <option value="2">第3项</option>
        <option value="2">第4项</option>
        <option value="2">第5项</option>
        <option value="2">第6项</option>
        <option value="2">第7项</option>
        <option value="2">第8项</option>
        <option value="2">第9项</option>
    </select>
</form>
    <script>
     $.fn.wrap = function(arg){
     var col = arg || 1;
     var pos = this.position(),
     div = $("<div/>"),
     panel = $("<div/>"),
     input = $("<input type=text />"),
     sel = this;
     input.val(this[0].children[this[0].selectedIndex].innerHTML).css("width", this.width() > 150 ? this.width() : 150);
     buildPanel(sel);
     panel.css({
     border: "1px solid gray",
     display: "none"
     });
     div.append(input).append(panel);
     div.css({
     position: "absolute",
     top: pos.top,
     left: pos.left,
     "z-index": 1000,
     width: "80%"
     });
     div.insertBefore(this);
     this.css("visibility", "hidden");

     function buildPanel(sel){
     for(var i = 0, opts = sel.children(), len = opts.length; i < len; i++){
     var entry = $("<div/>").attr({
     "data-value": opts[i].value,
     "data-index": i,
     "class": "option"
     }).css("width", (100 / col) + "%").html(opts[i].innerHTML).appendTo(panel);
     }
     $("<div class=clear />").appendTo(panel);
     }

     input.focus(function(){
     panel.show();
     });
     $(document).click(function(event){
     var target = $(event.target);
     if(div.has(target).length === 0 && !div.is(target)){
     panel.hide();
     }
     });
     panel.click(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     input.val(target.attr("data-value"));
     sel.prop("selectedIndex", target.attr("data-index"));
     panel.hide();
     }
     }).mouseover(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     target.addClass("optionHover");
     }
     }).mouseout(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     target.removeClass("optionHover");
     }
     });
     }
     $("#sel").wrap(5);
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <style>
     .clear{
     clear: both;
     }
     .option{
     background-color: white;
     display: inline-block;
     float: left;
     }
     .optionHover{
     background-color: blue;
     color: white;
     }
    </style>
</head>
<body id="bd">
<form id="myform">
    <select id="sel">
        <option value="0">---请选择---</option>
        <option value="1">第1项</option>
        <option value="2">第2项</option>
        <option value="2">第3项</option>
        <option value="2">第4项</option>
        <option value="2">第5项</option>
        <option value="2">第6项</option>
        <option value="2">第7项</option>
        <option value="2">第8项</option>
        <option value="2">第9项</option>
    </select>
</form>
    <script>
     $.fn.wrap = function(arg){
     var col = arg || 1;
     var pos = this.position(),
     div = $("<div/>"),
     panel = $("<div/>"),
     input = $("<input type=text />"),
     sel = this;
     input.val(this[0].children[this[0].selectedIndex].innerHTML).css("width", this.width() > 150 ? this.width() : 150);
     buildPanel(sel);
     panel.css({
     border: "1px solid gray",
     display: "none"
     });
     div.append(input).append(panel);
     div.css({
     position: "absolute",
     top: pos.top,
     left: pos.left,
     "z-index": 1000,
     width: "80%"
     });
     div.insertBefore(this);
     this.css("visibility", "hidden");

     function buildPanel(sel){
     for(var i = 0, opts = sel.children(), len = opts.length; i < len; i++){
     var entry = $("<div/>").attr({
     "data-value": opts[i].value,
     "data-index": i,
     "class": "option"
     }).css("width", (100 / col) + "%").html(opts[i].innerHTML).appendTo(panel);
     }
     $("<div class=clear />").appendTo(panel);
     }

     input.focus(function(){
     panel.show();
     });
     $(document).click(function(event){
     var target = $(event.target);
     if(div.has(target).length === 0 && !div.is(target)){
     panel.hide();
     }
     });
     panel.click(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     input.val(target.attr("data-value"));
     sel.prop("selectedIndex", target.attr("data-index"));
     panel.hide();
     }
     }).mouseover(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     target.addClass("optionHover");
     }
     }).mouseout(function(event){
     var target = $(event.target);
     if(target.is(".option")){
     target.removeClass("optionHover");
     }
     });
     }
     $("#sel").wrap(5);
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>
    <style>
        .clear{
            clear: both;
        }
        .option{
            background-color: white;
            display: inline-block;
            float: left;
        }
        .optionHover{
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body id="bd">
    <form id="myform">
        <br /><br /><br />
        <table>
            <tr>
                <td>
                    <input type="text" value="123" />
                </td>
                <td>
                    <input type="text" value="123" />
                </td>
            </tr>
            <tr>
                <td>
                    <select id="sel">
                        <option value="0">请选择</option>
                        <option value="11">第1项</option>
                        <option value="22">第2项</option>
                        <option value="33">第3项</option>
                        <option value="44">第4项</option>
                        <option value="55">第5项</option>
                        <option value="66">第6项</option>
                        <option value="77">第7项</option>
                        <option value="88">第8项</option>
                    </select>
                </td>
                <td>
                    <input type="text" value="123" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" value="123" />
                </td>
                <td>
                    <input type="text" value="123" />
                </td>
            </tr>
        </table>

    </form>
    <script>
        $.fn.selectToDiv = function (arg, fromFirstOption, divWidth, position) {
            if (typeof (fromFirstOption) == "undefined") {
                fromFirstOption = true;
            }
            if (typeof (divWidth) == "undefined") {
                divWidth = "80%";
            }
            if (typeof (position) == "undefined") {
                position = "bottom";
            }
            var col = arg || 1;
            var pos = this.position(),
                div = $("<div/>"),
                panel = $("<div/>"),
                input = $("<input type='text' style='cursor:pointer;' readonly='readonly' />"),
                sel = this;
            //冒牌的select，宽度与原select一致
            input.val(this[0].children[this[0].selectedIndex].innerHTML).css("width", this.width());
            buildPanel(sel);
            panel.css({
                cursor: "pointer",
                border: "1px solid gray",
                "background-color": "white",
                display: "none"
            });
            div.append(input).append(panel);
            div.css({
                position: "absolute",
                top: pos.top,
                left: pos.left,
                "z-index": 1000,
                width: divWidth
            });
            div.insertBefore(this);            this.css("visibility", "hidden");
            //将option相关值绑定到div上
            function buildPanel(sel) {
                for (var i = fromFirstOption ? 0 : 1, opts = sel.children(), len = opts.length; i < len; i++) {
                    var entry = $("<div/>").attr({
                        "data-value": opts[i].value,
                        "data-index": i,
                        "class": "option"
                    }).css("width", (100 / col) + "%").html(opts[i].innerHTML).appendTo(panel);
                }
                $("<div class=clear />").appendTo(panel);
            }            input.focus(function () {
                panel.show();
            });
            //在外点击则隐藏
            $(document).click(function (event) {
                var target = $(event.target);
                //事件激发对象，不是展开的部分，也不是冒牌的input；则应该隐藏
                if (!panel.is(target) && !input.is(target)) {
                    panel.hide();
                }
            });
            panel.click(function (event) {
                var target = $(event.target);
                if (target.is(".option")) {
                    input.val(target.text());
                    sel.prop("selectedIndex", target.attr("data-index"));
                    panel.hide();
                }
            }).mouseover(function (event) {
                var target = $(event.target);
                if (target.is(".option")) {
                    target.addClass("optionHover");
                }
            }).mouseout(function (event) {
                var target = $(event.target);
                if (target.is(".option")) {
                    target.removeClass("optionHover");
                }
            });
        }
        $("#sel").selectToDiv (5, true, "500px");
    </script>
</body>
</html>感谢  牧名  老兄的大作，功力深厚啊。本人狗尾续貂，加了一些参数上去，以接近实际的需求。
现在差不多可以用一下了。但还差一点点的是：如何灵活定位？
目前是定死在右下边了，而且表单在页面中的位置是千变万化的，如果希望div在上面或者左侧，右侧弹出，应该如何处理？
你如果要这么做，又不能放弃html 表单元素
完全可以用 hidden元素来代替select ，用户体验也好。反正就是放个结果