高手请进 —— 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> </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， 换成别的东西了， 取值时比较麻烦的，对项目其它地方改动也太多了。
上面只是我做的一个半成品， ……
[解决办法]
你找个整套的UI解决方案，看一下人家都怎么做的就可以了嘛，extjs 跟jquery easyui都是这样的
[解决办法]
你把弹出的DIV设为最上层试试, 用JQUERY的bgiframe插件,
这样它在最上层应该就替换掉了SELECT吧
把SELECT的高度设小,
[解决办法]
可以试试用css div模仿select下拉框
[解决办法]
写一个代理
完全把select隐藏掉
用div在select的原来位置替代显示 和 点击的事件
[解决办法]
建设楼主试试插件，Chosen，我有个项目是用这个。
http://www.aqee.net/docs/Chosen/Chosen.htm
[解决办法]
- HTML code
<!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>