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

关注

原创最新推荐文章于 2026-04-04 10:12:00 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

jquery-datatable实现表格加载，分页和删除功能近期更换技术，采用bootstrap的布局方式来进行项目编写，由于bootstrap为前端布局框架，好多功能实现需要借助插件完成，比如表格的实现。由于第一次接触datatable插件，找了好长时间的资料才找齐一套不太完整的方案（至少能进行项目），贴出代码，自己巩固一下知识，也给遇到相同问题的朋友一个解决思路。引用data-table的css和js。 /vendors/dataTables 阅读详情

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

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

收录于