var item=$(this);
var province = item.attr(‘province-id’);
var choosenItem = item.parent().find(‘.choosen’);
if(choosenItem)
$(choosenItem).removeClass(‘choosen’);
item.addClass(‘choosen’);
//更新大学列表
initSchool(province);
}
);
}
function initSchool(provinceID)
{
//原先的学校列表清空
$(‘#choose-a-school’).html(”);
var schools = schoolList[provinceID-1].school;
for(i=0;i<schools.length;i++)
{
$(‘#choose-a-school’).append(‘<a class=”school-item” school-id=”‘+schools[i].id+'”>’+schools[i].name+'</a>’);
}
//添加大学列表项的click事件
$(‘.school-item’).bind(‘click’, function(){
var item=$(this);
var school = item.attr(‘school-id’);
//更新选择大学文本框中的值
$(‘#school-name’).val(item.text());
//关闭弹窗
hide();
}
);
}
2.3 弹出及隐藏窗口
在本例中, 用户点击一个要求输入学校的文本框, 页面跳出弹框. 弹框中含有关闭按钮, 可以关闭弹框.
//弹出窗口
function pop(){
//将窗口居中
makeCenter();
//初始化省份列表
initProvince();
//默认情况下, 给第一个省份添加choosen样式
$(‘[province-id=”1″]’).addClass(‘choosen’);
//初始化大学列表
initSchool(1);
}
//隐藏窗口
function hide()
{
$(‘#choose-box-wrapper’).css(“display”,”none”);
}
3. DEMO及下载
http://demo.jb51.net/js/2012/jquery_school/
下载：jquery_school.rar
