码迷,mamicode.com
首页 > 编程语言 > 详细

javascript三级联动效果实现2

时间:2015-09-22 14:41:54      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:javascript级联; 三级联动

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);
});

本文出自 “Pureweber技术” 博客,请务必保留此出处http://tomastong.blog.51cto.com/8722734/1697038

javascript三级联动效果实现2

标签:javascript级联; 三级联动

原文地址:http://tomastong.blog.51cto.com/8722734/1697038

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!