jquery.position.select.js.bak 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. /*
  2. 职业选择
  3. Date:2016-09-27
  4. Author:Mr.Luo
  5. settings 参数说明
  6. -----
  7. data:填充下拉框的数据;
  8. nameId:所选择值附加到的文本框或其它容器Id
  9. maxCount:允许最大选择数量
  10. ------------------------------ */
  11. $.fn.positionSelect = function (settings) { alert(settings.nameId);
  12. if (this.length < 1) { return; };
  13. // 默认值
  14. settings = $.extend({
  15. containerId: null,
  16. className: null,
  17. nameId: null,
  18. required: true,
  19. maxCount: 5,
  20. onConfirm: null
  21. }, settings);
  22. var box_obj = $(this);
  23. var container = $("#" + settings.containerId);
  24. var num = settings.containerId;
  25. var title = "<div class=\"title\"><b>选择职业</b><span class=\"tip\">(最多选择" + settings.maxCount + "项)</span> &nbsp&nbsp;<span class='tip' style='font-weight:bold;' id='tip_" + num + "'></span><a href=\"javascript:void(0)\" ></a></div>";
  26. var selectedResult = "<div class=\"sele-tag\"><dl><dt>已选择:</dt><dd id='ddResult_" + num + "'><a id='btnSure_" + num + "' href='javascript:void(0)' class='btn'>确定</a></dd></dl></div>";
  27. init(settings);
  28. function init(setting) {
  29. if ($("body #" + num + "_bg").length <= 0) {
  30. $("body").append("<div id='" + num + "_bg' class='mask-Bg'></div>");
  31. }
  32. if (setting.className != null) {
  33. container.addClass(setting.className);
  34. }
  35. var data = eval("(" + positiondata + ")");
  36. container.html("");
  37. if ($.trim(container.html()) == "") {
  38. container.append(title);
  39. container.append(selectedResult);
  40. container.append("<div class=\"position-menu\" id='" + num + "_datalist'></div>");
  41. var datalist = $("#" + num + "_datalist");
  42. datalist.append("<div class='menu' id='firstMenu'></div>");
  43. var firstMenu = datalist.find("#firstMenu");
  44. firstMenu.append("<ul></ul>");
  45. $.each(data.positionlist, function (i, obj) { // 循环第一级
  46. $(firstMenu).find("ul").append("<li id='dl_" + i + "' name='" + i + "'>" + obj.p + "</li>");
  47. });
  48. if (datalist.find("div[class='sub-menu']").length <= 0) {
  49. datalist.append("<div class='sub-menu' id='secondMenu'></div>");
  50. }
  51. var secondMenu = datalist.find("#secondMenu");
  52. // 第一级菜单鼠标悬浮事件,弹出二级菜单和三级菜单项
  53. $("#" + num + "_datalist #firstMenu ul li").bind("mouseover", function () {
  54. secondMenu.html("");
  55. $("#" + num + "_datalist #firstMenu ul li").removeClass("sele");
  56. $(this).addClass("sele");
  57. var index = $(this).attr("name");
  58. $.each(data.positionlist[index].c, function (j, item) {
  59. secondMenu.append("<dl id='dl_" + j + "'></dl>");
  60. var dtItem = "<dt id='dt_" + j + "'>" + item.n + "</dt>";
  61. secondMenu.find("dl[id='dl_" + j + "']").append(dtItem);
  62. secondMenu.find("dl[id='dl_" + j + "']").append("<dd id='dd_" + j + "'></dd>");
  63. $.each(data.positionlist[index].c[j].a, function (m, dist) {
  64. var threeMenu = "<a href='javascript:void(0)' id='item_" + index + "_" + j + "_" + m + "'>" + dist.s + "</a>";
  65. secondMenu.find("dl[id='dl_" + j + "'] dd[id='dd_" + j + "']").append(threeMenu);
  66. });
  67. });
  68. //根据已选择的项,将相同的列表展示项添加样式
  69. var resultItems = container.find("#ddResult_" + num + " a");
  70. $.each(resultItems, function (n, ritem) {
  71. var rid = $(ritem).attr("id").substr(2, $(ritem).attr("id").length);
  72. secondMenu.find("a[id='" + rid + "']").addClass("sele");
  73. });
  74. // 列表项点击事件,选中则在结果容器中显示添加选中样式
  75. secondMenu.find("a").bind("click", function () {
  76. var selectedCount = container.find("#ddResult_" + num + " a").length - 1;
  77. if ($(this).hasClass("sele")) {
  78. $(this).removeClass("sele");
  79. container.find("#ddResult_" + num).find("a[id='c_" + $(this).attr("id") + "']").remove();
  80. }
  81. else {
  82. if (selectedCount >= setting.maxCount) {
  83. container.find("#tip_" + num).html("你大爷的,没看到提示吗?最多只能选择" + setting.maxCount + "项!").css("color", "red");
  84. setTimeout(function () {
  85. container.find("#tip_" + num).empty();
  86. }, 3000);
  87. }
  88. else {
  89. $(this).addClass("sele");
  90. container.find("#ddResult_" + num + " #btnSure_" + num).before("<a href='#' id='c_" + $(this).attr("id") + "'>" + $.trim($(this).html()) + "</a>");
  91. }
  92. }
  93. // 结构容器中选中项点击事件,移除并将列表中的选中样式取消
  94. container.find("#ddResult_" + num + " a").bind("click", function () {
  95. var rid = $(this).attr("id");
  96. if (rid != "btnSure_" + num) {
  97. var sid = rid.substr(2, rid.length);
  98. $(this).remove();
  99. secondMenu.find("a[id='" + sid + "']").removeClass("sele");
  100. }
  101. });
  102. });
  103. });
  104. // 默认显示第一级
  105. $(firstMenu).find("ul li:first").addClass("sele").trigger("mouseover");
  106. // 关闭选择框
  107. container.find(".title a").bind("click", function () {
  108. container.hide();
  109. $("#" + num + "_bg").hide();
  110. });
  111. // 确定
  112. container.find("#ddResult_" + num + " a[id='btnSure_" + num + "']").click(function () {
  113. var selectedItems = container.find("#ddResult_" + num + " a[id!='btnSure_" + num + "']");
  114. var results = "";
  115. $.each(selectedItems, function (i, item) {
  116. results += $.trim($(item).html()) + ",";
  117. });
  118. if (results.length > 0) {
  119. results = results.substr(0, results.length - 1);
  120. }
  121. var type= $("#" +setting.nameId);
  122. alert(setting.nameId);
  123. if (type.attr("type") == "text") {
  124. type.val(results);
  125. }
  126. else{
  127. type.html(results);
  128. }
  129. container.hide();
  130. $("#" + num + "_bg").hide();
  131. });
  132. }
  133. container.show();
  134. $("#" + num + "_bg").show();
  135. }
  136. };