Html
送货地址/收货人:
<span id="region">
<select class="w110">
</select>
<input type="hidden" value="" name="city_id" id="city_id">
<input type="hidden" name="area_id" id="area_id" class="area_ids"/>
<input type="hidden" name="area_info" id="area_info" class="area_names"/>
<label for="area_info" generated='true' class="error"></label>
</span>
javascript
function regionInit(divId){
var area_id = 0; //0是省份 如果设置值为19 则只有广东的各个市
getArea(function(){
if(typeof(nc_a[area_id]) == 'object' && nc_a[area_id].length > 0){//数组存在
var area_select = $("#" + divId + " > select");//选择要初始化的对象
areaInit(area_select,area_id);
}
$("#" + divId + " > select").change(regionChange); // select的onchange事件
$("#" + divId + " > input:button[class='edit_region']").click(regionEdit); // 编辑按钮的onclick事件
});}
function areaInit(area_select,area_id){//初始化地区
getArea(function(){
if(typeof(area_select) == 'object' && nc_a[area_id].length > 0){
var areas = new Array();
areas = nc_a[area_id];
$(area_select).append("<option>-请选择-</option>");
for (i = 0; i <areas.length; i++){
$(area_select).append("<option value='" + areas[i][0] + "'>" + areas[i][2] + "</option>");
}
}
});}
if(typeof(regionChange) != 'function'){//检测是否已经被定义过，防止重写
function regionChange(){
// 删除后面的select
$(this).nextAll("select").remove();
// 计算当前选中到id和拼起来的name
var selects = $(this).siblings("select").andSelf();
var id = '';
var names = new Array();
for (i = 0; i < selects.length; i++){
sel = selects[i];
if (sel.value > 0){
id = sel.value;
name = sel.options[sel.selectedIndex].text;
names.push(name);
}
}
$(".area_ids").val(id);
$(".area_name").val(name);
$(".area_names").val(names.join("\t"));
if (this.value > 0){//下级地区
var area_id = this.value;
if(typeof(nc_a[area_id]) == 'object' && nc_a[area_id].length > 0){//数组存在
$("<select></select>").change(regionChange).insertAfter(this);
areaInit($(this).next("select"),area_id);//初始化地区
}
}
}}
function regionEdit(){
$(this).siblings("select").show();
$(this).siblings("span").andSelf().hide();}
function gcategoryEdit(){
$(this).siblings("select").show();
$(this).siblings("span").andSelf().remove();}
if(typeof(jQuery.validator.addMethod) == 'function'){//添加自动检测是否是最后一级地区
jQuery.validator.addMethod("checkarea", function(value, element) {
return this.optional(element) || (typeof(nc_a[value]) == 'undefined');//当数组不存在时确定选到最后
}, "请选择所在地区");}
function getArea(callback){
if(typeof(nc_a) == 'undefined'){//加载地区数据
var area_scripts_src = '';
area_scripts_src = $("script[src*='jquery.js']").attr("src");//取JS目录的地址
area_scripts_src = area_scripts_src.replace('jquery.js', 'area_array.js');
$.getScript(area_scripts_src,function(){
callback();
return true;
});
} else {
callback();
}}
//显示一级分类下拉框
function show_gc_1(depth,gc_json){
var html = '<select name="search_gc[]" id="search_gc_0" nc_type="search_gc" class="querySelect">';;
html += ('<option value="0">请选择...</option>');
if(gc_json){
for(var i in gc_json){
if(gc_json[i].depth == 1){
html += ('<option value="'+gc_json[i].gc_id+'">'+gc_json[i].gc_name+'</option>');
}
}
}
html += '</select>';
$("#searchgc_td").html(html);}
//显示子分类下拉框
function show_gc_2(chooseid,gc_json){
if(gc_json && chooseid > 0){
var childid = gc_json[chooseid].child;
if(childid){
var html = '<select name="search_gc[]" id="search_gc_'+gc_json[chooseid].depth+'" nc_type="search_gc" class="querySelect">';;
html += ('<option value="0">请选择...</option>');
var childid_arr = childid.split(",");
if(childid_arr){
for(var i in childid_arr){
html += ('<option value="'+gc_json[childid_arr[i]].gc_id+'">'+gc_json[childid_arr[i]].gc_name+'</option>');
}
}
html += '</select>';
$("#searchgc_td").append(html);
}
}}
nc_a = new Array();
nc_a[0]=[['1','北京'],['2','天津'],['3','河北省'],['4','山西省'],['5','内蒙 古自治区'],['6','辽宁省'],['7','吉林省'],['8','黑龙江省'],['9','上海'],['10','江苏省'],['11','浙江省'],['12','安徽省'],['13','福建省'],['14','江西省'],['15','山东省'],['16','河南省'],['17','湖北省'],['18','湖南省'],['19','广东省'],['20','广西壮族自治区'],['21','海南省'],['22','重庆'],['23','四川省'],['24','贵州省'],['25','云南省'],['26','西藏自治区'],['27','陕西省'],['28','甘肃省'],['29','青海省'],['30','宁夏回族自治区'],['31','新疆维吾尔自治区'],['32','台湾省'],['33','香港特别行政区'],['34','澳门特别行政区'],['35','海外']];
nc_a[1]=[['36','北京市']];
nc_a[2]=[['40','天津市']];
nc_a[3]=[['73','石家庄市'],['74','唐山市'],['75','秦皇岛市'],['76','邯郸 市'],['77','邢台市'],['78','保定市'],['79','张家口市'],['80','承德市'],['81','衡水市'],['82','廊坊市'],['83','沧州市']];
nc_a[4]=[['84','太原市'],['85','大同市'],['86','阳泉市'],['87','长治市'],['88','晋城市'],['89','朔州市'],['90','晋中市'],['91','运城市'],['92','忻州市'],['93','临汾市'],['94','吕梁市']];
nc_a[5]=[['95','呼和浩特市'],['96','包头市'],['97','乌海市'],['98','赤峰市'],['99','通辽市'],['100','鄂尔多斯市'],['101','呼伦贝尔市'],['102','巴彦淖尔市'],['103','乌兰察布市'],['104','兴安盟'],['105','锡林郭勒盟'],['106','阿拉善盟']];
nc_a[6]=[['107','沈阳市'],['108','大连市'],['109','鞍山市'],['110','抚顺市'],['111','本溪市'],['112','丹东市'],['113','锦州市'],['114','营口市'],['115','阜新市'],['116','辽阳市'],['117','盘锦市'],['118','铁岭市'],['119','朝阳市'],['120','葫芦岛市']];
nc_a[7]=[['121','长春市'],['122','吉林市'],['123','四平市'],['124','辽源市'],['125','通化市'],['126','白山市'],['127','松原市'],['128','白城市'],['129','延边朝鲜族自治州']];
nc_a[8]=[['130','哈尔滨市'],['131','齐齐哈尔市'],['132','鸡西市'],['133','鹤岗市'],['134','双鸭山市'],['135','大庆市'],['136','伊春市'],['137','佳木斯市'],['138','七台河市'],['139','牡丹江市'],['140','黑河市'],['141','绥化市'],['142','大兴安岭地区']];
nc_a[9]=[['39','上海市']];
..........
页面调用的js
$(document).ready(function(){
regionInit("region");});
// $('#city_id').val(292);
// $('#area_id').val(292);
// $('#area_info').val('广东省 珠海市');
//这几个应该是自定义设置 但没有那种想要的效果
在默认的下是这样 在第一级选择了省才会有第二级市的出现 以此下去
好吧 现在问题来了，如何设置默认显示已选择的前两级选项菜单（如：广东省，广州市） 而且是可选的
而不是写死在Html上面...
求解！~
感谢~！！
似乎用json更为合适。
如你第一个项是广东省，也可能是直辖市，比如上海，那么可能就不会有市这个选项。所以用ajax先做第一次筛选，选择省或者直辖市后，请求服务器或者查询json数组，进行匹配，如果有市，就用dom拼接方式循环出来即可。。。不知道说的是否明白。。。
http://api.map.baidu.com/library/CityList/1.4/examples/CityList.html
楼上思路是正确的, 就是把省市区都分别做成三个接口, 要人家填的时候, 就显示省, 给select加个onchange的事件, 选择完了之后, 再拿到省的代码或名字去请求, 就O啦....