设置联动的<select></select>下拉选项菜单的默认值

最新推荐文章于 2021-03-11 13:29:43 发布

weixin_30952103

最新推荐文章于 2021-03-11 13:29:43 发布

阅读量605

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fyy-888/p/5314764.html

本文介绍了一个基于JavaScript的地区选择器实现方案，通过动态加载地区数据并根据用户选择更新选项，适用于电商平台等需要用户填写详细地址的场景。

送货地址/收货人:
    <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>

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','上海市']];
..........