—— select转成弹出div
日期：2014-05-16 浏览次数：20322 次
高手请进 —— 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&quo
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
