―― select转成弹出div _JavaScript

高手请进 ―― select转成弹出div
JScript code
<!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>&nbsp;</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>