`

jquery mobile 实现一个二级联动

阅读更多

      前些天做了一个关于微信平台的移动项目,觉得挺好玩的。貌似在网上的能找的的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>");
        }
    });

 界面的截图如下:


 
 

  • 大小: 50.9 KB
0
0
分享到:
评论

相关推荐

    jqueryMobile省市二级菜单联动

    "jqueryMobile省市二级菜单联动"是一个常见功能,尤其适用于构建具有地域选择功能的网站或应用。这个功能允许用户在两个下拉菜单中分别选择省份和城市,且两个菜单之间存在联动关系,即当用户在一个菜单中选择某个...

    ajax+jquery二级联动实现

    总的来说,这个二级联动的实现是通过AJAX技术动态获取和更新数据,结合jQuery简化DOM操作,实现了用户交互式的省市区选择功能。这种方式提高了用户体验,减少了不必要的页面刷新,使得数据加载更加高效。

    jquery 省市二级联动

    一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可

    jquery解析xml并实现二级联动

    本主题将深入探讨如何使用jQuery解析XML数据,并利用这些数据实现省市二级联动的效果。这种功能常见于地理选择,用户在选择省份后,下拉菜单会自动更新展示对应省份的城市选项。 首先,我们需要理解XML(Extensible...

    jQuery移动端省市二级联动选择插件.zip

    "jQuery移动端省市二级联动选择插件"是专为解决这个问题而设计的一个工具,它利用JavaScript和jQuery库,提供了高效、易用的解决方案。这个插件允许用户在手机或平板设备上方便地选择省份和城市,极大地提升了用户...

    JQuery实现动态绑定和二级联动

    本主题将深入探讨如何使用jQuery实现动态绑定和二级联动效果,特别关注于DropDownList(下拉列表)的交互设计。这在构建数据驱动的Web应用时尤其常见,例如在地址选择、分类筛选等场景。 一、动态绑定 动态绑定是...

    jquery 二级联动

    通过以上步骤,我们可以使用jQuery实现一个基本的二级联动效果。当然,实际应用中可能还需要考虑更多因素,如异步数据加载、错误处理等。此外,现在有许多现成的插件和框架(如Select2、Vue.js等)也能轻松实现类似...

    jquery ajax实现省市二级联动

    该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo,简单易懂,可以参考博客:http://blog.csdn.net/mockingbirds/article/details/46842327

    jquery实现的水平三级联动

    总结来说,"jQuery实现的水平三级联动"是通过HTML构建菜单结构,CSS进行布局和美化,jQuery提供动态交互和事件处理,共同打造一个用户友好的、水平展示的三级联动菜单。这种技术在电商网站的商品分类、地区选择等...

    jQuery的手机端省市二级联动选择代码.zip

    两级联动选择插件调用: $('.select-value').mPicker({ //级别 level:2, //需要渲染的json,二级联动的需要嵌套子元素,有一定的json格式... jQuery手机端省市二级联动选择代码是一款非常实用的城市选择器插件。

    Jquery实现的的动态无刷新的二级联动菜单

    在本示例中,我们探讨的是如何利用jQuery实现一个无刷新的二级联动菜单,这涉及到jQuery库、AJAX异步请求以及JSON数据解析等多个关键知识点。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理...

    jQuery json省市区街道四级联动地址选择插件.zip

    总的来说,jQuery JSON省市区街道四级联动地址选择插件通过结合jQuery的强大功能和JSON的简洁数据格式,为网页开发提供了一个高效、易用的地址选择解决方案。它既满足了功能需求,又提供了良好的用户体验,是开发者...

    jquery实现省市县三级联动

    在网页开发中,"jQuery 实现省市县三级联动"是一个常见的功能需求,尤其在构建具有地理定位信息的网站或应用时。这个功能允许用户在选择省份后,市和县(或区)的下拉列表会自动更新,显示出与之相关的选项,提供了...

    jQuery mobile相册的一种样式

    在这个主题下,我们将深入探讨如何利用jQuery Mobile创建一个具有吸引力的相册展示。 首先,jQuery Mobile的核心是其基于HTML5的组件模型,这使得开发者能够轻松地创建具有触摸优化交互的页面。在创建相册样式时,...

    jQuery json省市区街道四级联动地址选择插件

    在网页开发中,尤其是在电子商务网站或者需要用户填写详细地址的应用中,四级联动地址选择插件是一个常见且实用的功能。它通常包括省、市、区(县)和街道四个级别,用户逐级选择,以确保收货地址的准确性。这种插件...

    JQuery实现无刷新省市三级联动

    实现省市三级联动的核心思路是:当用户在一级(省)列表中选择一个选项时,通过Ajax异步请求获取对应省的二级(市)数据,并动态填充到市的选择框;同理,当用户在市的选择框中选择后,再获取对应的三级(区/县)...

    JQuery省、省市二级联动、省市县/区三级联动

    这里提到的"JQuery省、省市二级联动、省市县/区三级联动"是一个使用jQuery库实现的前端解决方案,它能为用户提供流畅且视觉效果良好的交互体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、...

    jQuery遮罩弹出地区二级和三级联动代码

    总的来说,这个资源提供了一个完整的解决方案,用于在网页上实现基于jQuery的地区二级和三级联动选择功能。通过理解并拆解这些文件,开发者可以学习到如何使用jQuery来创建交互式UI组件,以及如何结合CSS和...

    Jquery实现省市区三级联动多选.zip

    "Jquery实现省市区三级联动多选"是一个典型的前端技术应用,它解决了传统二级联动或三级联动一对一模式的问题,引入了多选功能,使得用户在选择省市区时可以有更大的自由度。 一、jQuery简介 jQuery是一个快速、...

    jquery 无刷新二级联动

    以下是一个简单的jQuery实现无刷新二级联动的步骤: 1. **HTML结构**:创建两个下拉列表,一个作为一级分类,另一个作为二级分类。 ```html 请选择 &lt;!-- 这里填充一级分类的数据 --&gt; 请选择 &lt;!-- 这里二级...

Global site tag (gtag.js) - Google Analytics