javascript三级联动效果实现2

var text = "";
for (i = 0; i < data.length; i++) {
    text += "<option value=" + i + " data-pId=" + data[i].pId + ">" + data[i].pName + "</option>";
}
$(".shengf").append(text);
//step2:城市
var text2 = "";
$(".shengf").change(function() {
    text2 = "<option>请选择城市</option>";
    $(".city option").remove();
    $(".zhanyd option").remove();
    $(".zhanyd").append("<option>请选择专营店</option>");
    var cityid = $(this).val();
    var shengfs;
    if (cityid.length < 5) {
        shengfs = data[cityid].cities;
        for (j = 0; j < shengfs.length; j++) {
            text2 += "<option value=" + j + " data-cId=" + shengfs[j].cId + ">" + shengfs[j].cName + "</option>";
        }
        //step3:店铺
        var text3 = "";
        $(".city").change(function() {
            text3 = "<option>请选择专营店</option>";
            $(".zhanyd option").remove();
            var shengfid = $(this).val();
            if (shengfid.length < 5) {
                var zhanyds = shengfs[shengfid].dealers;
                for (z = 0; z < zhanyds.length; z++) {
                    text3 += "<option value=" + z + " data-dCode=" + zhanyds[z].dCode + ">" + zhanyds[z].dName + "</option>";
                }
            }
            $(".zhanyd").append(text3);
        });
    }
    $(".city").append(text2);
});
时间: 2024-11-13 08:36:18

javascript三级联动效果实现2的相关文章

javascript三级联动效果实现

function linkQ(sel1,sel2,sel3,arr){     var sel1v=$.map(arr,function(val,key){return key})     // 将sel1的option放入     $.each(arr,function(i,n){         sel1.append("<option value="+ n.provinceId +">"+ n.provinceName +"</op

Android开发之解析XML并实现三级联动效果

请尊重他人的劳动成果,转载请注明出处:Android开发之解析XML并实现三级联动效果 本实例主要应用XmlPullParser解析XML文档中的省市区,然后将数据绑定到Spinner上实现三级联动的效果.关于XmlPullParser的详解大家可以参考<Android开发之使用PULL解析和生成XML>一文. 运行效果图: 程序代码: 核心代码: <pre name="code" class="java">package com.jph.s

自写日期年月日三级联动效果jquery插件

哈哈,好久没写新博文啦,原因是最近一直在研究用jquery UI实现截取头像的功能,哈哈 言归正传,有时候呢,我们会在用户资料的页面用到一个年月日日期的三级联动效果.在网上找了找,没看到有多么合适的(主要是本屌丝倾向于用jquery写成插件的形式使用,哈哈~~) 这篇博文呢,主要目的是给大家看下我用jquery写成插件的形式. 原理很简单,就是判断闰年,然后在select change事件的时候给显示日期的select重新append option (PS.不知道为啥,js有appendchil

PHP开发中基于layUI的三级联动效果如何实现

后台开发常常用到layUI框架,这样才能让整个页面效果看起来美观大方,然而有时候一些原生的效果放到layUI框架上是无法使用的,比如最近遇到了省市县三级联动的select效果.不同于之前的,layUI框架里,需要重视select的lay-filter属性,来监听事件,另外需要form.render()来重新渲染,解决这两大难题,联动也就不再是难题.下面就来为大家分享下吧. 实现代码: <!DOCTYPE html><html><head><meta charset

JavaScript 三级联动

附件连接下载地址:http://files.cnblogs.com/files/CaktyRiven/js.zip <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动</title> </head> <body> <select name="" id

基于jQuery+JSON的省市县 二级 三级 联动效果

省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty

Vue如何使用vue-area-linkage实现地址三级联动效果

很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 一.安装 // v5之前的版本 npm i --save vue-area-linkage // v5及之后的版本 npm i --save vue-area-linkage area-data or yarn // v5之前的版本 yarn add vue-area-linkage // v5及之后的版本 yarn

Ajax来实现下拉框省市区三级联动效果(服务端基于express)

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

三级联动效果

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var cityList = new Array(); var quList = n