`
panenfei
  • 浏览: 7887 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
school选择控件 用jQuery做一个能够查看学校信息的下拉框
;(function($) {

$.fn.createUnivContextBox = function(options) {
	var content = '<div class="mod"><div class="head clearfix">'+
		'<h3>请选择学校所在的省市:<select class="province">'+
		'<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><option value="23">重庆市</option><option value="24">台湾省</option><option value="25">贵州省</option><option value="26">云南省</option><option value="27">西藏自治区</option><option value="28">陕西省</option><option value="29">甘肃省</option><option value="30">青海省</option><option value="31">宁夏回族自治区</option><option value="32">新疆维吾尔族自治区</option><option value="33">香港特别行政区</option><option value="34">澳门特别行政区</option><option value="35">海外</option>'+ 
		'</select><input type="hidden" /></h3><div class="option"><a class="close" href="javascript:jQuery.hideAllContextBox();">关闭</a></div></div>'+
		'<div class="body clearfix"><div class="SchoolSelectorCtr">loading....</div><hr/><div class="pageNav"></div></div></div>';
	options['content'] = content;
	options['province_id'] = 1;
	options['school_type'] = 6;
	$(this).createContextBox(options);
	var context_box = this;
	$(this).next().find("input").val(options['school_type']);
	$(this).next().find("select").change(function(){
		$(context_box).changeProvinceOrPage($(this).val(),$(this).next().val(),1);
	});
	$(this).changeProvinceOrPage(options['province_id'],options['school_type'],1);
};

$.fn.changeProvinceOrPage = function(province_id, school_type,current_page) {
	var pageNav = $(this).next().find(".pageNav");
	var tableDiv = $(this).next().find(".SchoolSelectorCtr");
	var from = 45*(current_page-1);
	var to = 45*(current_page);
	var context_box = this;
	$.getScript("http://profile.blog.sohu.com/service/schoolJson.htm?prov="+province_id+"&cate="+school_type+"&st="+from+"&sz=45&vn=school_data",
		function(){
		  var data = school_data['data'];
		  var counter = 0;
		  var tbody = $("<tbody></tbody>");
		  var counter = 0;
		  var tr = $("<tr></tr>");
		  for( var i = 0; i < data.length; i++) {
			  if (i%3 == 0) tr = $("<tr></tr>");
			  var a = $("<a href='javascript:void(0);' name='"+data[i][0]+"'>"+data[i][1]+"</a>");
			  a.click(function(){
			  	  $("#"+context_box.attr("id").replace("school_name","school_id")).val($(this).attr("name"));
			  	  context_box.val($(this).text());
			  	  $.hideAllContextBox();
			  });
			  var td = $("<td></td>");
			  td.append(a);
			  tr.append(td);
			  if (i%3 == 2 || data.length - 1 == counter) {
			  	tbody.append(tr);
			  }
		  }
          var table = $("<table></table>").attr("cellspacing", 4).attr("cellpadding", 0).attr("border", 0).attr("width", "100%").append(tbody);
          tableDiv.html(table);
          //显示分页
		  var pg= parseInt(current_page,10);
       	  var total_pg = (school_data['count']/45)+((school_data['count']%45)>0?1:0);
       	  //每页显示7个
       	  var prev = "";
       	  var pages = [];
       	  var next = "";
       	  if (pg > 4) {
       	    prev = "<a name='"+(pg-1)+"' href='javascript:void(0);'>上一页</a>";
       	  }
       	  if (total_pg > 7 && pg+3<total_pg) {
       	    next = "<a name='"+(pg+1)+"' href='javascript:void(0);'>下一页</a>";
       	  }
       	  for (var i = (((pg-3)>0)?(pg-3):1); i <= ((total_pg>(pg+3))?(pg+3):total_pg); i++) {
       	 	if (pg == i) {
       	 		pages.push("<span>"+i+"</span>");
       	 	} else {
       	 		pages.push("<a name='"+i+"' href='javascript:void(0);'>"+i+"</a>");
       	 	}
       	 }
       	 pageNav.html(prev + pages.join('') + next);
       	 pageNav.find("a").click(function() {
       	 	$(context_box).changeProvinceOrPage(province_id,school_type,parseInt(this.name,10));
       	 });
	});
	return this;
};

})(jQuery);
Global site tag (gtag.js) - Google Analytics