关于通过artTemplate模板的方式实现城市的联动

最新推荐文章于 2022-11-03 10:56:11 发布

原创最新推荐文章于 2022-11-03 10:56:11 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用artTemplate和jQuery实现的城市二级联动选择器的方法。通过创建JSON格式的数据结构来存储省市区信息，并利用模板引擎渲染选项，实现了省市区的选择联动效果。

1.创建一个json格式的数据

var cityData={
    Data: [{
        value: '110000',
        text: '北京市',
        children: [{
            value: "110101",
            text: "北京市",
            children: [{
                value: "110101",
                text: "东城区"
            }, {
                value: "110102",
                text: "西城区"
            }, {
                value: "110103",
                text: "崇文区"
            }, {
                value: "110104",
                text: "宣武区"
            }, {
                value: "110105",
                text: "朝阳区"
            }, {
                value: "110106",
                text: "丰台区"
            }, {
                value: "110107",
                text: "石景山区"
            }, {
                value: "110108",
                text: "海淀区"
            }, {
                value: "110109",
                text: "门头沟区"
            }, {
                value: "110111",
                text: "房山区"
            }, {
                value: "110112",
                text: "通州区"
            }, {
                value: "110113",
                text: "顺义区"
            }, {
                value: "110114",
                text: "昌平区"
            }, {
                value: "110115",
                text: "大兴区"
            }, {
                value: "110116",
                text: "怀柔区"
            }, {
                value: "110117",
                text: "平谷区"
            }, {
                value: "110228",
                text: "密云县"
            }, {
                value: "110229",
                text: "延庆县"
            }, {
                value: "110230",
                text: "其它区"
            }]
        }]
    }, {
        value: '120000',
        text: '天津市',
        children: [{
            value: "120100",
            text: "天津市",
            children: [{
                value: "120101",
                text: "和平区"
            }, {
                value: "120102",
                text: "河东区"
            }, {
                value: "120103",
                text: "河西区"
            }, {
                value: "120104",
                text: "南开区"
            }, {
                value: "120105",
                text: "河北区"
            }, {
                value: "120106",
                text: "红桥区"
            }, {
                value: "120107",
                text: "塘沽区"
            }, {
                value: "120108",
                text: "汉沽区"
            }, {
                value: "120109",
                text: "大港区"
            }, {
                value: "120110",
                text: "东丽区"
            }, {
                value: "120111",
                text: "西青区"
            }, {
                value: "120112",
                text: "津南区"
            }, {
                value: "120113",
                text: "北辰区"
            }, {
                value: "120114",
                text: "武清区"
            }, {
                value: "120115",
                text: "宝坻区"
            }, {
                value: "120116",
                text: "滨海新区"
            }, {
                value: "120221",
                text: "宁河县"
            }, {
                value: "120223",
                text: "静海县"
            }, {
                value: "120225",
                text: "蓟县"
            }, {
                value: "120226",
                text: "其它区"
            }]
        }]
    }
]}

2.编写arttemplate模板

省份模板

<script id="provinceOption" type="text/html">
    <%for(var i=0;i<cityData3.length;i++){%>
        <option value="<%=cityData3[i].value%>" index="<%=i%>"><%=cityData3[i].text%></option>
    <%}%>

城市模板

<script id="cityOption" type="text/html">
    <%for(var i=0;i<children.length; i++){%>
        <option value="<%=children[i].value%>"><%=children[i].text%></option>
    <%}%>

3.编写html代码

<select class="province">
    <option value="省份">省份</option>
</select>
<select class="city">
    <option value="城市" class="default">城市</option>
</select>

4.编写js代码，首先应该先引入<script type="text/javascript" src="js/arttmpl.js"></script>和<script type="text/javascript" src="js/jquery-1.7.min.js" ></script>两个js文件

var provinceHtml=template("provinceOption",cityData);
$(".province").append(provinceHtml);
$(".province").change(function(){
    var provinceIndex=$(this).find("option:selected").attr("index");
    //对城市模版进行渲染
    var cityHtml=template("cityOption",cityData.data[provinceIndex]);
    $(".default").siblings().remove();
    $(".city").append(cityHtml);
    })

最后就会实现城市的二级联动