AG广东会,山东十一选五,大发

?
  • AG广东会400电话
  • 微网小程序
  • AI电话山东十一选五
  • 电商代运营
  • AG广东会,山东十一选五,大发:全 部 栏 目

    AG广东会400电话 网络优化推广 AI电话山东十一选五 呼叫中心 网站建设 商标?知产 微网小程序 电商运营 彩铃?短信 增值拓展业务
    Ajax实现弹出式无刷新城市选择功能代码

    本文实例讲述了Ajax实现弹出式无刷新城市选择功能。分享给大家供大家参考。具体如下:

    这是一款很棒的全国城市选择效果,添加城市时先添加组:找到id是"selectSub"中select标签下,添加option标签,value属性递增,找到id是"selectSub",按照原有格式添加div,其id属性递增;然后添加二级副选框选项:复制id是"selectSub"下任意input标签,粘贴在需要添加的位置即可,你想扩展的话,配合动态语言完全可以将城市从数据库中读取出来。

    运行效果截图如下:

    在线演示地址如下:

    http://demo.jb51.net/js/2015/js-ajax-dialog-cha-city-codes/

    具体代码如下:

    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    html xmlns="http://www.w3.org/1999/xhtml">
    head>
    title>Ajax弹出式无刷新城市选择特效/title>
    meta http-equiv="content-type" content="text/html; charset=utf-8">
    style type="text/css">
    BODY {
     FONT-SIZE: 12px; PADDING-TOP: 50px
    }
    H2 {
     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
    }
    .bton {
     BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
    }
    .cont {
     PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
    }
    #main {
     MARGIN: 0px auto; WIDTH: 400px
    }
    #selectItem {
     BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN-TOP: 10px; Z-INDEX: 2; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px
    }
    #preview {
     BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
    }
    #result {
     BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
    }
    .tit {
     PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px
    }
    .bgc_ccc {
     BACKGROUND: #ccc
    }
    .bgc_eee {
     BACKGROUND: #eee
    }
    .c_999 {
     COLOR: #999
    }
    .pointer {
     CURSOR: pointer
    }
    .left {
     FLOAT: left
    }
    .right {
     FLOAT: right
    }
    .cls {
     CLEAR: both; FONT-SIZE: 0px; OVERFLOW: hidden; HEIGHT: 0px
    }
    #bg {
     DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.7
    }
    .hidden {
     DISPLAY: none
    }
    .move {
     CURSOR: move
    }
    /style>
    /head>
    body>
    DIV id="main">
     INPUT class="bton pointer" ;}
    document.onmousemove = function(event){dragPro(event);}
    /script>
    /body>
    /html>

    希望本文所述对大家的Ajax程序设计有所帮助。

    您可能感兴趣的文章:
    • js实现仿阿里巴巴城市选择框效果实例
    • 基于jQuery实现仿51job城市选择功能实例代码
    上一篇:双层ajax嵌套(可多层)用法实例
    下一篇:Ajax带提示的验证表单实例
  • 相关文章
  • ?

    ? 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax实现弹出式无刷新城市选择功能代码 Ajax,实现,弹出式,无刷,新城市,

    AG广东会官网入口(中国)官方网站-IOS/Android通用版(2026已更新)