js支持拼音分类的多城市选择弹出层

来源:https://www.sucaihuo.com/js/779.html 2016-02-18 20:14浏览(1134) 收藏

我们经常在机票网看到出发城市和到达城市选择,js输入框弹出层信息提示,鼠标点击文本框弹出城市选择的浮动层,像类似订机票网站选择城市的效果
js支持拼音分类的多城市选择弹出层
分类:表单代码 > 城市选择 难易:高级
查看演示 下载资源: 141 下载资源 下载积分: 20 积分

出发城市和到达城市两个城市选择

<table class="demo">
    <tr>
        <td width="90"><font style="color:red">*&nbsp;</font>出发城市:</td>
        <td width="180" align="left">
            <div class="inputbox">
                <input name="ddlOrgCity" type="text" value="中文/拼音" id="ddlOrgCity" onclick="suggestF.display(this, '', event);" onkeydown="item_suggest.item_display(this, '', event);" onblur="item_suggest.item_onblur(this);" class="stext" />
                <span class="keyicon"><img src="images/city.gif" border="0" id="imgddlOrgCity" name="ddlOrgCity" onclick="Text_OnClick('ddlOrgCity')" /></span>
            </div>
        </td>
        <td width="90"><font style="color: Red">*&nbsp;</font>到达城市:</td>
        <td width="180" align="left">
            <div class="inputbox">
                <input name="ddlDesCity" type="text" value="中文/拼音" id="ddlDesCity" onclick="suggestF.display(this, 'ddlOrgCity2', event);" onkeydown="item_suggest.item_display(this, '', event);" onblur="item_suggest.item_onblur(this);" class="stext" />
                <span class="keyicon"><img src="images/city.gif" border="0" id="imgddlDesCity" name="ddlDesCity" onclick="Text_OnClick('ddlDesCity')" /></span>
            </div>
        </td>
    </tr>
</table>

城市拼音筛选

var letterH = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'W', 'X', 'Y', 'Z'];
var hotH = ['北京', '上海', '广州', '深圳', '杭州', '南京', '成都', '武汉', '青岛', '大连', '苏州', '三亚', '厦门', '海口', '西安', '长沙', '昆明', '沈阳', '香港', '澳门'];
var citysH = {A: ['阿坝', '阿克苏', '阿拉尔', '阿拉善盟', '阿里', '定安县', '安康', '安庆', '鞍山', '安顺', '安阳'], B: ['白城', '百色', '白沙', '白山', '白银', '保定', '宝鸡', '保山', '保亭', '包头', '巴彦淖尔市', '巴音郭楞', '巴中', '北海', '北京', '蚌埠', '本溪', '毕节', '滨州', '博尔塔拉', '亳州'], C: ['沧州', '长白山', '长春', '常德', '昌都', '昌吉', '昌江', '长沙', '长治', '常州', '巢湖', '朝阳', '潮州', '承德', '成都', '澄迈县', '郴州', '赤峰', '池州', '重庆', '楚雄', '滁州', '崇左'], D: ['大理', '大连', '丹东', '儋州', '大庆', '大同', '大兴安岭', '达州', '德宏', '德阳', '德州', '定西', '迪庆', '东方', '东莞', '东营'], E: ['鄂尔多斯', '恩施', '鄂州'], F: ['防城港', '佛山', '抚顺', '阜新', '阜阳', '福州', '抚州'], G: ['甘南', '赣州', '甘孜', '广安', '广元', '广州', '贵港', '桂林', '贵阳', '果洛', '固原'], H: ['海北', '海东', '海口', '海南藏族', '海西', '哈密', '邯郸', '杭州', '汉中', '哈尔滨', '鹤壁', '河池', '合肥', '鹤岗', '黑河', '衡水', '衡阳', '和田', '河源', '菏泽', '贺州', '香港', '红河', '洪湖市', '淮安', '淮北', '怀化', '淮南', '花莲', '黄冈', '黄南', '黄山', '黄石', '呼和浩特', '惠州', '葫芦岛', '呼伦贝尔', '湖州'], J: ['佳木斯', '吉安', '江门', '焦作', '嘉兴', '嘉峪关', '揭阳', '吉林', '基隆', '济南', '金昌', '晋城', '景德镇', '荆门', '荆州', '金华', '济宁', '晋中', '锦州', '九江', '酒泉', '鸡西', '济源'], K: ['开封', '喀什', '克拉玛依', '克孜勒苏柯尔克孜', '昆明'], L: ['来宾', '莱芜', '廊坊', '兰州', '拉萨', '乐东', '乐山', '凉山', '连云港', '聊城', '辽阳', '辽源', '丽江', '临沧', '临汾', '临高县', '陵水', '临夏', '临沂', '林芝', '丽水', '六安', '六盘水', '柳州', '陇南', '龙岩', '娄底', '漯河', '洛阳', '泸州', '吕梁'], M: ['马鞍山', '茂名', '眉山', '梅州', '绵阳', '牡丹江'], N: ['南昌', '南充', '南京', '南宁', '南平', '南通', '南阳', '那曲', '内江', '宁波', '宁德', '怒江'], P: ['盘锦', '攀枝花', '平顶山', '平凉', '萍乡', '普洱', '莆田', '濮阳'], Q: ['黔东南', '潜江', '黔南', '黔西南', '青岛', '庆阳', '清远', '秦皇岛', '钦州', '琼海', '琼中', '齐齐哈尔', '七台河', '泉州', '曲靖', '衢州'], R: ['日喀则', '日照'], S: ['三门峡', '三明', '三亚', '上海', '商洛', '商丘', '上饶', '山南', '汕头', '汕尾', '韶关', '绍兴', '邵阳', '神农架林区', '沈阳', '深圳', '石家庄', '石河子', '十堰', '石嘴山', '双鸭山', '绥化', '遂宁', '朔州', '四平', '松原', '随州', '宿迁', '苏州', '宿州'], T: ['泰安', '台东', '台南', '台北', '太原', '台州', '泰州', '唐山', '天津', '天门', '天水', '铁岭', '铜川', '通化', '通辽', '铜陵', '铜仁', '吐鲁番', '图木舒克', '屯昌县'], W: ['万宁', '潍坊', '威海', '渭南', '文昌', '文山', '温州', '乌海', '武汉', '芜湖', '五家渠', '乌兰察布市', '乌鲁木齐', '乌苏里江', '武威', '无锡', '五指山', '吴忠', '梧州'], X: ['厦门', '西安', '襄樊', '湘潭', '湘西', '咸宁', '仙桃', '咸阳', '孝感', '锡林郭勒盟', '兴安盟', '兴城', '邢台', '西宁', '新乡', '信阳', '新余', '忻州', '西双版纳', '宣城', '许昌', '徐州'], Y: ['雅安', '延安', '延边', '盐城', '阳江', '阳泉', '扬州', '烟台', '宜宾', '宜昌', '宜春', '伊春', '伊犁', '银川', '营口', '鹰潭', '益阳', '永州', '岳阳', '玉林', '榆林', '运城', '云浮', '玉树', '玉溪'], Z: ['枣庄', '张家界', '张家口', '张掖', '漳州', '湛江', '肇庆', '昭通', '郑州', '镇江', '中山', '周口', '舟山', '珠海', '驻马店', '株洲', '淄博', '自贡', '资阳', '遵义', '中卫']};
var suggestH = new city_suggest();
suggestH.letter = letterH;
suggestH.hot = hotH;
suggestH.hotelcity = citysH;

var letterF = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'S', 'T', 'W', 'X', 'Y', 'Z'];
var hotF = ["北京", "北京首都", "北京南苑", "上海", "上海虹桥", "上海浦东", "深圳", "杭州", "广州", "成都", "南京", "武汉", "呼和浩特", "重庆", "长沙", "昆明", "西安", "青岛", "天津", "宁波", "厦门", "太原", "大连", "济南"];
var citysF = {A: ['阿克苏', '阿勒泰', '安康', '安庆', '安顺', '鞍山'], B: ['百色', '蚌埠', '包头', '保山', '北海', '北京首都', '北京南苑'], C: ['昌都', '长春', '长海', '长沙', '长治', '常德', '常州', '朝阳', '成都', '赤峰', '重庆'], D: ['达县', '大理', '大连', '大庆', '大同', '丹东', '德宏', '迪庆', '东营', '敦煌'], E: ['鄂尔多斯', '恩施'], F: ['佛山', '福州', '阜阳', '富蕴'], G: ['赣州', '固原', '格尔木', '光化', '广汉', '广州', '贵阳', '桂林'], H: ['哈尔滨', '哈密', '海口', '海拉尔', '邯郸', '汉中', '杭州', '合肥', '和田', '黑河', '衡阳', '呼和浩特', '怀化', '淮安', '黄山', '黄岩', '徽州'], J: ['吉安', '吉林', '济南', '济宁', '佳木斯', '嘉峪关', '锦州', '晋江', '井冈山', '景德镇', '景洪', '九江', '九寨沟', '酒泉'], K: ['喀纳斯', '喀什', '克拉玛依', '库车', '库尔勒', '昆明'], L: ['拉萨', '兰州', '黎平', '丽江', '连城', '连云港', '梁平', '林西', '林芝', '临沧', '临沂', '柳州', '龙岩', '庐山', '泸州', '路桥', '洛阳'], M: ['满洲里', '芒市', '梅县', '绵阳', '漠河', '牡丹江'], N: ['那拉提', '南昌', '南充', '南京', '南宁', '南通', '南阳', '宁波'], P: ['攀枝花', '普洱'], Q: ['齐齐哈尔', '且末', '秦皇岛', '青岛', '庆阳', '衢州', '泉州'], S: ['三亚', '沙市', '汕头', '鄯善', '上海虹桥', '上海浦东', '深圳', '沈阳', '石家庄', '思茅'], T: ['塔城', '台州', '太原', '唐山', '天津', '通化', '通辽', '铜仁'], W: ['万州', '威海', '潍坊', '温州', '文山', '乌海', '无锡', '梧州', '武汉', '武夷山', '乌兰浩特', '乌鲁木齐'], X: ['西安', '西昌', '西宁', '西双版纳', '锡林浩特', '厦门', '香格里拉', '襄樊', '兴城', '兴宁', '兴义', '邢台', '徐州'], Y: ['烟台', '延安', '延吉', '盐城', '伊宁', '宜宾', '宜昌', '义乌', '银川', '永州零陵', '榆林', '元谋', '运城'], Z: ['湛江', '张家界', '昭通', '郑州', '芷江', '中甸', '舟山', '珠海', '遵义', '中卫']};
var suggestF = new city_suggest();
suggestF.letter = letterF;
suggestF.hot = hotF;
suggestF.hotelcity = citysF;
评论5
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 4楼
    03-20 09:01
    s***i
    正在学习,很好的效果啊 很赞
  • 头像 3楼
    12-06 11:08
    c***g
    很好的效果啊 很赞
  • 头像 板凳
    08-09 09:21
    j***g
    这个实用这个实用这个实用
  • 头像 椅子
    07-21 09:12
    码***农
    这个用的上
  • 头像 沙发
    05-30 09:25
    r***t
    留着用吧。。
1 2