U.City.htm 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  6. <!--1473基础js类-->
  7. <script src="http://www.1473.cn/uform.js" type="text/javascript"></script>
  8. <!-- <script src="http://nodejs.1473.cn/crossdomain.js" type="text/javascript"></script>-->
  9. <link href="http://nodejs.1473.cn/css/UCity/U.City.css" rel="stylesheet" type="text/css" />
  10. <script type="text/javascript">
  11. Namespace.register("U.City"); //命名空间
  12. window.onload = function () {
  13. U.CD.Host = "192.168.100.61"; //需要更换数据库host,在这里更换
  14. U.CD.Database = "UseStudio_CityS"; //需要更换数据库名字,在这里更换
  15. U.CD.AjaxUrl = "http://nodejs.1473.cn/";
  16. U.CD.LIFA([["U_ACD", "http://nodejs.1473.cn/CD.htm", "ACD"]]);
  17. //U.CD.Init(); //初始化跨域文件
  18. //其他初始化写在下面
  19. //U.ACD.Request(U.CD.AjaxUrl, ([U.CD.Host, U.CD.Database, "UC_S_Select_Sta", '0']), U.Exam.aa_asyn, (["", "bb"]));
  20. //---------------------------db 为数据库名字, r为 存储过程函数, val为该存储过程的参数 若没有参数可以不传 若有多个参数采用数组的方法,
  21. //-----------------------------------------------------------------------------------例如传入 [a,b] 查看下面 div文本为北京的元素
  22. //U.City.init(, $("#qq")[0]); //第一个参数是作为 放入哪个元素下 //第二个参数是元素点击提交数据
  23. }
  24. U.CD.AsynJWH = function () {
  25. }
  26. U.City.init = function (a) {
  27. if (!$("#U_City")[0]) {
  28. U.City.Element = a;
  29. var ss = $$("div", { "id": "soi", "style": { "width": US.Width + "px", "height": US.Height + "px", "position": "absolute", "z-index": "28", "left": "0px", "top": "0px"} }, document.body)
  30. var B = $$("div", { "style": { "border": "1px solid #ccc", "width": "240px", "position": "absolute", "z-index": "30" }, "id": "U_City" }, document.body);
  31. var B_T = $$("div", { "className": "Ul", "style": { "width": "100%"} }, B);
  32. var Pro = $$("div", { "id": "Pro", "className": "newcolor", "innerHTML": "省份", "onclick": [[U.City.ChangeNow, (["Pro"])]] }, B_T);
  33. var City = $$("div", { "id": "City", "className": "oldcolor", "innerHTML": "城市", "onclick": [[U.City.ChangeNow, (["City"])]] }, B_T);
  34. var area = $$("div", { "id": "area", "className": "oldcolor", "innerHTML": "县区", "onclick": [[U.City.ChangeNow, (["area"])]] }, B_T);
  35. $$("div", { "style": { "clear": "both"} }, B_T);
  36. //var a = $$("a", { "style": { "background": "#f5f5f5", "border-bottom": "1px solid #fff", "color": "#f60", "display": "inline", "float": "left", "padding": "8px 20px", "color": "#4D4D4D" }, "innerHTML": "街道" }, B_T);
  37. var B_B = $$("div", { "style": { "width": "100%", "height": "100%", "display": "inline", "float": "left", "margin": "10px 0 10px 0" }, "className": "B_B" }, B);
  38. U.ACD.Request(U.CD.AjaxUrl, ([U.CD.Host, U.CD.Database, "UC_S_Select_Pro", 1, 1]), U.City.Pro, (["", "bb"]));
  39. $$("div", { "style": { "clear": "both"} }, B);
  40. ss.onclick = function () { U.City.Del("U_City"); U.City.Del("soi"); }
  41. }
  42. }
  43. U.City.Pro = function (c) {
  44. for (var i = 0; i < c.value[0].length; i++) {
  45. //, "onclick": [[U.City.Pro, [(c.value[0][i].region_id)]]]
  46. $$("a", { "innerHTML": c.value[0][i].region_name, "id": c.value[0][i].region_id, "onclick": [[U.City.Value, ([c.value[0][i].region_name, c.value[0][i].region_id, "pro"])], [U.City.City, ([c.value[0][i].region_id, "City"])]], "style": { "display": "inline-block", "color": "#4d4d4d", "padding": "0 10px", "outline": "0", "text-decoration": "none", "white-space": "nowrap", "margin-right": "2px", "line-height": "14px", "font-size": "12px", "cursor": "pointer"} }, $(".B_B")[0]);
  47. }
  48. $$("div", { "style": { "clear": "both"} }, $(".B_B")[0]);
  49. }
  50. U.City.City = function (r, b) {
  51. U.City.IsProID = r;
  52. if (b) { U.City.ChangeNow(b); }
  53. $(".B_B")[0].innerHTML = "";
  54. $("#City")[0].style.background = "#fff";
  55. $("#Pro")[0].style.background = "#f5f5f5";
  56. var ad = U.ACD.Request(U.CD.AjaxUrl, ([U.CD.Host, U.CD.Database, "UC_S_Select_Pro", r, 2]), "", (["", "bb"]));
  57. for (var i = 0; i < ad.value[0].length; i++) {
  58. //, "onclick": [[U.City.Pro, [(c.value[0][i].region_id)]]]
  59. $$("a", { "innerHTML": ad.value[0][i].region_name, "id": ad.value[0][i].region_id, "onclick": [[U.City.Value, ([ad.value[0][i].region_name, ad.value[0][i].region_id, "city"])], [U.City.area, ([ad.value[0][i].region_id, "area"])]], "style": { "display": "inline-block", "color": "#4d4d4d", "padding": "0 10px", "outline": "0", "text-decoration": "none", "white-space": "nowrap", "margin-right": "2px", "line-height": "14px", "font-size": "12px", "cursor": "pointer"} }, $(".B_B")[0]);
  60. }
  61. $$("div", { "style": { "clear": "both"} }, $(".B_B")[0]);
  62. }
  63. U.City.area = function (r, b) {
  64. U.City.IsCityID = r;
  65. if (b) { U.City.ChangeNow(b); }
  66. $(".B_B")[0].innerHTML = "";
  67. $("#area")[0].style.background = "#fff";
  68. $("#City")[0].style.background = $("#Pro")[0].style.background = "#f5f5f5";
  69. var ad = U.ACD.Request(U.CD.AjaxUrl, ([U.CD.Host, U.CD.Database, "UC_S_Select_Pro", r, 3]), "", (["", "bb"]));
  70. for (var i = 0; i < ad.value[0].length; i++) {
  71. //, "onclick": [[U.City.Pro, [(c.value[0][i].region_id)]]]
  72. $$("a", { "innerHTML": ad.value[0][i].region_name, "id": ad.value[0][i].region_id, "onclick": [[U.City.Value, ([ad.value[0][i].region_name, ad.value[0][i].region_id, "area"])]], "style": { "display": "inline-block", "color": "#4d4d4d", "padding": "0 10px", "outline": "0", "text-decoration": "none", "white-space": "nowrap", "margin-right": "2px", "line-height": "14px", "font-size": "12px", "cursor": "pointer"} }, $(".B_B")[0]);
  73. }
  74. $$("div", { "style": { "clear": "both"} }, $(".B_B")[0]);
  75. }
  76. U.City.Value = function (a, b, c) {
  77. if (c == "pro") {
  78. U.City.Element.value = "";
  79. }
  80. else if (c == "city") {
  81. var oi = U.City.Element.value.split("/");
  82. U.City.Element.value = oi[0] + "/";
  83. }
  84. else if (c == "area") {
  85. var oi = U.City.Element.value.split("/");
  86. U.City.Element.value = oi[0] + "/" + oi[1] + "/";
  87. }
  88. $("#" + b)[0].style.backgroundColor = "#ccc";
  89. var oi = U.City.Element.value.split("/");
  90. if (oi.length == 3) { U.City.IsArea = b; U.City.Element.value += a; U.City.Del("U_City"); U.City.Del("soi") }
  91. else U.City.Element.value += a + "/";
  92. }
  93. U.City.Del = function (a) {
  94. $("#" + a).remove();
  95. }
  96. U.City.ChangeNow = function (a) {
  97. $("#Pro")[0].className = "oldcolor";
  98. $("#City")[0].className = "oldcolor";
  99. $("#area")[0].className = "oldcolor";
  100. $("#" + a)[0].className = "newcolor";
  101. $(".B_B")[0].innerHTML = "";
  102. if (a == "Pro") { U.City.Del("U_City"); U.City.init(U.City.Element); }
  103. else if (a == "City") {
  104. if (U.City.IsProID) { U.City.City(U.City.IsProID); }
  105. }
  106. else if (a == "area") { if (U.City.IsCityID) { U.City.area(U.City.IsCityID); } }
  107. }
  108. </script>
  109. </head>
  110. <body>
  111. <input id="oi" style="width: 240px; height: 30px; line-height: 30px; border: 1px solid #ccc;"
  112. onclick="U.City.init(this)" />
  113. </body>
  114. </html>