jquery mobile 实现一个二级联动

蚂蚁兄弟

浏览: 48432 次
性别:
来自: 上海

最近访客更多访客>>

qq113220715

工笔画年华

vfplt

七里奇异

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery mobile，移动开发

jquery mobile jquery 移动开发

前些天做了一个关于微信平台的移动项目，觉得挺好玩的。貌似在网上的能找的的demo，好像很少的样子。下面是一个三级级联动：纯粹是用js写的。

var province = "2:辽宁,1:北京,3:天津,4:河北";
var city = {
    "2": "201:沈阳,202:大连",
    "1": "101:西城,102:东城,103:崇文,104:宣武,105:朝阳,106:海淀,107:丰台,108:石景山,109:门头沟,110:房山,111:通州",
    "3": "301:青羊,302:河东,303:河西,304:南开,305:河北,306:红桥:307:塘沽:308:汉沽,309:大港,310:东丽:311:西青",
    "4": "401:石家庄,402:秦皇岛,403:廊坊,404:保定,405:邯郸,406:唐山,407:邢台,408:衡水,409:张家口,410:承德,411:沧州"
};
var contry = {
    "201": "2011:one,2012:two",
    "202":"2021:a,2022:B"
};
var shop = {
    "2011": "20111:门店1,20112:门店3,20113:门店4",
    "2012":"20121:门店a,20122:门店b,20123:门店c"
};

var app = new kendo.mobile.Application(document.body);
    var p1 = province.split(",");
    for (var i = 0; i < p1.length; i++) {
        $("#select-h-1a").append("<option value='" + p1[i].split(":")[0] + "'>" + p1[i].split(":")[1] + "</option>");
    }
    $("#select-h-1a").change(function () {
        // $(this).children('option:selected').val() = this.value
        if (city[this.value] != null && city[this.value] != "undefined") {
            var c1 = city[this.value].split(",");
            $("#select-h-1b option").remove();
            for (var j = 0; j < c1.length; j++) {
                $("#select-h-1b").append("<option value='" + c1[j].split(":")[0] + "'>" + c1[j].split(":")[1] + "</option>");
            }
            $("#select-h-1b").prepend("<option value=''>请选择市</option>");
        } else {
            $("#select-h-1b option").remove();
            $("#select-h-1b").append("<option value=''>请选择市</option>");
        }
    });
    $("#select-h-1b").change(function() {
        if (contry[this.value] != null && contry[this.value] != "undefined") {
            var c1 = contry[this.value].split(",");
            $("#select-h-1c option").remove();
            for (var j = 0; j < c1.length; j++) {
                $("#select-h-1c").append("<option value='" + c1[j].split(":")[0] + "'>" + c1[j].split(":")[1] + "</option>");
            }
            $("#select-h-1c").prepend("<option value=''>请选择镇</option>");
        } else {
            $("#select-h-1c option").remove();
            $("#select-h-1c").append("<option value=''>请选择镇</option>");
        }
    });
    $("#select-h-1c").change(function () {
        if (shop[this.value] != null && shop[this.value] != "undefined") {
            var c1 = shop[this.value].split(",");
            $("#select-native-2 option").remove();
            for (var j = 0; j < c1.length; j++) {
                $("#select-native-2").append("<option value='" + c1[j].split(":")[0] + "'>" + c1[j].split(":")[1] + "</option>");
            }
            $("#select-native-2").prepend("<option value=''>请选择门店</option>");
        } else {
            $("#select-native-2 option").remove();
            $("#select-native-2").append("<option value=''>请选择门店</option>");
        }
    });

界面的截图如下：