JS 按字母顺序选中城市

最新推荐文章于 2024-03-08 16:03:35 发布

Ms_WangH

最新推荐文章于 2024-03-08 16:03:35 发布

阅读量2.6k

点赞数

分类专栏：模块

模块专栏收录该内容

7 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市选择实现</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div>
    <fieldset>
        <legend>按字母顺序选中城市</legend>
        <label for="addr-show03">您选择的是：
            <input type="text" id="addr-show03">
        </label>
        <div id="data-wrap">
            <ul id="data-order">
                <li value='0'>热门</li>
                <li value='1'>ABCD</li>
                <li value='2'>EFGH</li>
                <li value='3'>JKLM</li>
                <li value='4'>NPQR</li>
                <li value='5'>STWX</li>
                <li value='6'>YZ</li>
            </ul>
            <div id="data-show"></div>
        </div>
    </fieldset>
</div>

<!--<script src="city.js"></script>-->
<script src="cityAZ.js"></script>


<script src="method03.js"></script>
</body>
</html>

cityAZ.js

var cityAll = [
    {
        name: "hot",
        citys: ["北京", "上海", "广州", "深圳", "杭州", "南京", "成都", "重庆", "武汉", "长沙", "昆明"]
    },
    {
        name: "A",
        citys: ["阿坝", "阿拉善", "阿里", "安康", "安庆", "鞍山", "安顺", "安阳", "澳门"]
    },
    {
        name: "B",
        citys: ["北京", "白银", "保定", "宝鸡", "保山", "包头", "巴中", "北海", "蚌埠", "本溪", "毕节", "滨州", "百色", "亳州"]
    },
    {
        name: "C",
        citys: ["重庆", "成都", "长沙", "长春", "沧州", "常德", "昌都", "长治", "常州", "巢湖", "潮州", "承德", "郴州", "赤峰", "池州", "崇左", "楚雄", "滁州", "朝阳"]
    },
    {
        name: "D",
        citys: ["大连", "东莞", "大理", "丹东", "大庆", "大同", "大兴安岭", "德宏", "德阳", "德州", "定西", "迪庆", "东营"]
    },
    {
        name: "E",
        citys: ["鄂尔多斯", "恩施", "鄂州"]
    },
    {
        name: "F",
        citys: ["福州", "防城港", "佛山", "抚顺", "抚州", "阜新", "阜阳"]
    },
    {
        name: "G",
        citys: ["广州", "桂林", "贵阳", "甘南", "赣州", "甘孜", "广安", "广元", "贵港", "果洛"]
    },
    {
        name: "H",
        citys: ["杭州", "哈尔滨", "合肥", "海口", "呼和浩特", "海北", "海东", "海南", "海西", "邯郸", "汉中", "鹤壁", "河池", "鹤岗", "黑河", "衡水", "衡阳", "河源", "贺州", "红河", "淮安", "淮北", "怀化", "淮南", "黄冈", "黄南", "黄山", "黄石", "惠州", "葫芦岛", "呼伦贝尔", "湖州", "菏泽"]
    },
    {
        name: "J",
        citys: ["济南", "佳木斯", "吉安", "江门", "焦作", "嘉兴", "嘉峪关", "揭阳", "吉林", "金昌", "晋城", "景德镇", "荆门", "荆州", "金华", "济宁", "晋中", "锦州", "九江", "酒泉"]
    },
    {
        name: "K",
        citys: ["昆明", "开封"]
    },
    {
        name: "L",
        citys: ["兰州", "拉萨", "来宾", "莱芜", "廊坊", "乐山", "凉山", "连云港", "聊城", "辽阳", "辽源", "丽江", "临沧", "临汾", "临夏", "临沂", "林芝", "丽水", "六安", "六盘水", "柳州", "陇南", "龙岩", "娄底", "漯河", "洛阳", "泸州", "吕梁"]
    },
    {
        name: "M",
        citys: ["马鞍山", "茂名", "眉山", "梅州", "绵阳", "牡丹江"]
    },
    {
        name: "N",
        citys: ["南京", "南昌", "南宁", "宁波", "南充", "南平", "南通", "南阳", "那曲", "内江", "宁德", "怒江"]
    },
    {
        name: "P",
        citys: ["盘锦", "攀枝花", "平顶山", "平凉", "萍乡", "莆田", "濮阳"]
    },
    {
        name: "Q",
        citys: ["青岛", "黔东南", "黔南", "黔西南", "庆阳", "清远", "秦皇岛", "钦州", "齐齐哈尔", "泉州", "曲靖", "衢州"]
    },
    {
        name: "R",
        citys: ["日喀则", "日照"]
    },
    {
        name: "S",
        citys: ["上海", "深圳", "苏州", "沈阳", "石家庄", "三门峡", "三明", "三亚", "商洛", "商丘", "上饶", "山南", "汕头", "汕尾", "韶关", "绍兴", "邵阳", "十堰", "朔州", "四平", "绥化", "遂宁", "随州", "宿迁", "宿州"]
    },
    {
        name: "T",
        citys: ["天津", "太原", "泰安", "泰州", "台州", "唐山", "天水", "铁岭", "铜川", "通化", "通辽", "铜陵", "铜仁", "台湾"]
    },
    {
        name: "W",
        citys: ["武汉", "乌鲁木齐", "无锡", "威海", "潍坊", "文山", "温州", "乌海", "芜湖", "乌兰察布", "武威", "梧州"]
    },
    {
        name: "X",
        citys: ["厦门", "西安", "西宁", "襄樊", "湘潭", "湘西", "咸宁", "咸阳", "孝感", "邢台", "新乡", "信阳", "新余", "忻州", "西双版纳", "宣城", "许昌", "徐州", "香港", "锡林郭勒", "兴安"]
    },
    {
        name: "Y",
        citys: ["银川", "雅安", "延安", "延边", "盐城", "阳江", "阳泉", "扬州", "烟台", "宜宾", "宜昌", "宜春", "营口", "益阳", "永州", "岳阳", "榆林", "运城", "云浮", "玉树", "玉溪", "玉林",]
    },
    {
        name: "Z",
        citys: ["杂多县", "赞皇县", "枣强县", "枣阳市", "枣庄", "泽库县", "增城市", "曾都区", "泽普县", "泽州县", "札达县", "扎赉特旗", "扎兰屯市", "扎鲁特旗", "扎囊县", "张北县", "张店区", "章贡区", "张家港", "张家界", "张家口", "漳平市", "漳浦县", "章丘市", "樟树市", "张湾区", "彰武县", "漳县", "张掖", "漳州", "长子县", "湛河区", "湛江", "站前区", "沾益县", "诏安县", "召陵区", "昭平县", "肇庆", "昭通", "赵县", "昭阳区", "招远市", "肇源县", "肇州县", "柞水县", "柘城县", "浙江", "镇安县", "振安区", "镇巴县", "正安县", "正定县", "正定新区", "正蓝旗", "正宁县", "蒸湘区", "正镶白旗", "正阳县", "郑州", "镇海区", "镇江", "浈江区", "镇康县", "镇赉县", "镇平县", "振兴区", "镇雄县", "镇原县", "志丹县", "治多县", "芝罘区", "枝江市", "芷江侗族自治县", "织金县", "中方县", "中江县", "钟楼区", "中牟县", "中宁县", "中山", "中山区", "钟山区", "钟山县", "中卫", "钟祥市", "中阳县", "中原区", "周村区", "周口", "周宁县", "舟曲县", "舟山", "周至县", "庄河市", "诸城市", "珠海", "珠晖区", "诸暨市", "驻马店", "准格尔旗", "涿鹿县", "卓尼", "涿州市", "卓资县", "珠山区", "竹山县", "竹溪县", "株洲", "株洲县", "淄博", "子长县", "淄川区", "自贡", "秭归县", "紫金县", "自流井区", "资溪县", "资兴市", "资阳"]
    }
]

method03.js

//****************针对第三种方式的具体js实现部分******************//


/*根据id获取对象*/
function $(str) {
    return document.getElementById(str);
}

var addrShow03 = $('addr-show03');
var dataOrder = $('data-order').querySelectorAll('li');
var dataShow = $('data-show');

(function init() {
    showHotCity();
})();

/*自动加载热门城市*/
function showHotCity() {
    dataOrder[0].className = 'cityOn';
    var citysLen = cityAll[0].citys.length;
    var dl = document.createElement('dl');
    var dt = document.createElement('dt');
    dt.innerText = cityAll[0].name;
    var dd = document.createElement('dd');
    dl.appendChild(dt);
    dl.appendChild(dd);

    for (var i = 0; i < citysLen; i++) {
        var aCity = document.createElement('a');
        aCity.innerText = cityAll[0].citys[i];
        dd.appendChild(aCity);
    }
    dataShow.appendChild(dl);

}

/*点击不同的字母集显示对于的城市*/
dataOrder.forEach(function (value, index, array) {
    value.onclick = function () {
        for (var z = 0; z < 7; z++) {
            if (z == index)
                dataOrder[index].className = 'cityOn';
            else
                dataOrder[z].className = '';
        }
        dataShow.innerHTML = '';
        switch (index) {
            case 0:
                showHotCity();
                break;
            case 6:
                showCitys(index, 2);
                break;
            default:
                showCitys(index, 4);
        }
    }
});

/*显示城市的具体方法*/
function showCitys(index, m) {
    var currentAll = cityAll.slice(4 * index - 3, 4 * index + m - 3);
    var dl = [];
    for (var j = 0; j < m; j++) {
        dl[j] = document.createElement('dl');
        var dt = document.createElement('dt');
        dt.innerText = currentAll[j].name;
        dl[j].appendChild(dt);
        var citysLen = currentAll[j].citys.length;
        var dd = document.createElement('dd');
        for (var k = 0; k < citysLen; k++) {
            var aCity = document.createElement('a');
            aCity.innerText = currentAll[j].citys[k];
            dd.appendChild(aCity);
        }
        dl[j].appendChild(dd);
        dataShow.appendChild(dl[j]);
    }
}

/*点击城市时，将结果显示在输入框中(该点击事件绑定在父元素上)*/
dataShow.onclick = function (e) {
    var cityShow = dataShow.querySelectorAll('a');
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if (target && target.nodeName == 'A') {
        addrShow03.value = target.innerText;
    }
}

style.css

/*全局样式*/
* {
    margin: 0;
    padding: 0;
}

fieldset {
    width: 500px;
    padding: 20px;
    margin: 30px;
    border: 1px solid #ccc;
}

legend{
    font-size: 18px;
    font-weight: bold;
}

#addr-show, #addr-show02,#addr-show03{
    width: 200px;
    height: 25px;
    margin-bottom: 10px;
}

.btn {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    background-color: #aaa;
    margin: 0 20px;
}

.btn:disabled{
    background-color:#ccc;
}


/*方法三样式部分*/
#data-wrap{
    border: 1px solid #ccc;
}
#data-order{
    height: 30px;
    background-color: #eee;
}
#data-order li{
    list-style: none;
    display: inline-block;
    text-align: center;
    width: 67px;
    font-size: 14px;
    line-height: 31px;
    cursor: default;
}

.cityOn{
    background-color: #fff;
}
#data-show{
    padding: 20px 10px;
}

#data-show dt{
    font-size: 14px;
    padding: 5px;
    color: #A5D2D5;
}
#data-show a{
    font-size: 12px;
    width: 38px;
    color: #513A08;
    padding: 5px;
    text-decoration: underline;
}

#data-show a:hover{
    color: #000;
    background-color: #A5D2D5;
    border-radius: 4px;
    cursor: pointer;
}

Ms_WangH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 按字母顺序选中城市

index.html&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;城市选择实现&amp;lt;/t
复制链接

扫一扫

专栏目录