javaScript学习-动态为ul添加li

最新推荐文章于 2023-09-09 20:18:59 发布

yinyan1314

最新推荐文章于 2023-09-09 20:18:59 发布

阅读量1.8k

点赞数 2

分类专栏：前端 js 文章标签： javascript html

本文链接：https://blog.csdn.net/yinyan1314/article/details/77835877

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

实现思路：ul对象.append(li对象)；

实现：
HTML代码：

<div class="cityBox">
        <div class="head">
            <span class="title">选择城市</span>
            <span class="close" onclick="closeFun()">关闭</span>
        </div>
        <div>
            <div class="c1">
                <label class="bt">省/直辖市:</label>
                <ul class="list" id="province"></ul>
            </div>
            <hr/>
            <ul class="list" style="width: 100%;" id="city"></ul>
        </div>
</div>

CSS代码：

.cityBox{
    width: 80% ;
    min-height: 50%;
    border: 3px solid moccasin;
    position: absolute;
    border-radius: 5px;
    display: none;
    background: #fff;
    top: 7%;
    left: 10%;
    z-index: 1;
}
.cityBox .head{
    height: 50px;
    background: moccasin;
   /*  text-align: center; */
}
.cityBox .head .title{
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
}
.cityBox .head .close{
    line-height: 50px;
    font-size: 20px;
    float: right;
    margin-right: 10px;
}
.cityBox .head .close:hover{
    color: red;
}
.cityBox .c1{
    margin: 10px 10xp 10px 10px;
}
.cityBox .bt{
    float: left;
    font-size: 20px;
}
.cityBox .list{
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height : 10%;
    text-align:center;
}
.cityBox .list li{
    float: left;
    width: 30%;
    list-style: none;
    text-align:center;
    height: 10%;
    line-height: 40px;
    font-size: 20px;
    color: #2e2e2e;
    font-family: 微软雅黑;
    font-weight: bold;
    overflow: hidden;
}
.cityBox .list li:hover{
    cursor: pointer;
}
.clear{
    clear: both;
}

JS代码：

var pac=[
    {"id":"001","pac_name":"北京"}, {"id":"002","pac_name":"天津"}, {"id":"003","pac_name":"上海"}, {"id":"004","pac_name":"重庆"}, {"id":"005","pac_name":"河北"}, {"id":"006","pac_name":"山西"},
    {"id":"007","pac_name":"内蒙古"}, {"id":"008","pac_name":"辽宁"}, {"id":"009","pac_name":"吉林"}, {"id":"010","pac_name":"黑龙江"}, {"id":"011","pac_name":"江苏"}, {"id":"012","pac_name":"浙江"},
    {"id":"013","pac_name":"安徽"}, {"id":"014","pac_name":"福建"}, {"id":"015","pac_name":"江西"}, {"id":"016","pac_name":"山东"}, {"id":"017","pac_name":"河南"}, {"id":"018","pac_name":"湖北"},
    {"id":"019","pac_name":"湖南"}, {"id":"020","pac_name":"广东"}, {"id":"021","pac_name":"广西"}, {"id":"022","pac_name":"海南"}, {"id":"023","pac_name":"四川"}, {"id":"024","pac_name":"贵州"},
    {"id":"025","pac_name":"云南"}, {"id":"026","pac_name":"西藏"}, {"id":"027","pac_name":"陕西"}, {"id":"028","pac_name":"甘肃"}, {"id":"029","pac_name":"青海"}, {"id":"030","pac_name":"宁夏"},
    {"id":"031","pac_name":"新疆"}
];

$(function(){
    $(".btn").click(function(){
        $("#province").html("");
        $("#city").html("");
        $(".cityBox").show();
        var province=[];
        var id=[];
    /*  var str=eval(pac);
        for(var i=0;i<str.length;i++) {
            province[i] = str[i].pac_name;
            id[i] = str[i].id;
            var li ="<li value="+id[i]+" onclick='cityFun(this)'>"+ province[i]+"</li>";
            $("#province").append(li)
        }*/
        for(var i=0;i<pac.length;i++) {
            province[i] = pac[i].pac_name;
            id[i] = pac[i].id;
            var li ="<li value="+id[i]+" onclick='cityFun(this)'>"+ province[i]+"</li>";
            $("#province").append(li)
        }

    });
});