高手请进 —— 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>
<!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>