省级下拉显示全面地

最新推荐文章于 2022-12-29 16:58:29 发布
最新推荐文章于 2022-12-29 16:58:29 发布
阅读量133 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/914556495wxkj/p/3426681.html
版权 
<title>实现省市级联效果</title>
<style type="text/css">
body{
    margin:0;
    padding:0;
    font-size:12px;
    line-height:20px;
}
.main{
    width:528px;
    margin-left:auto;
    margin-right:auto;
    }
.center{
    border:solid 5px #ffa3ba;
    border-bottom:0;
    padding-top:10px;
    }
.left{
    text-align:right;
    width:100px;
    height:25px;
    padding-right:5px;
    }
.red{
    color:#cc0000;
    font-weight:bold;
    }
.inputs{
    width:130px;
    height:16px;
    border:solid 1px #666666;
    float:left;
    margin-right:5px;
    }
.prompt{
    margin-left:10px;
    color:#F00;
    }    
</style>
<script type="text/javascript">
/*验证登录名*/
function checkLoginName(){
  var loginName=document.getElementById("loginName").value;
  var LoginNameId=document.getElementById("login_prompt");
   LoginNameId.innerHTML="";    
  var regLoginName=/^[\u4e00-\u9fa5\w]+$/;    
    if(regLoginName.test(loginName)==false){
      LoginNameId.innerHTML="登录名只能是中文字符、英文字母、数字及下划线";
    return false;
      }
      return true;
    }
    
/*验证身份证号码*/    
function checkMycard(){
  var mycard=document.getElementById("mycard").value;
  var mycardId=document.getElementById("mycard_prompt");
   mycardId.innerHTML="";    
  var regMycard=/^\d{15}$|^\d{18}$/;        
    if(regMycard.test(mycard)==false){
       mycardId.innerHTML="身份证号码只能由15或18位的数字组成";
    return false;
      }
      return true;
    }

/*验证固定电话*/
function checkPhoto(){
  var photo=document.getElementById("photo").value;
  var photo_prompt=document.getElementById("photo_prompt");
  photo_prompt.innerHTML="";    
  var reg=/^\d{3,4}-\d{7,8}$/;    
    if(reg.test(photo)==false){
       photo_prompt.innerHTML="固定电话不正确，例如010-54845216";
    return false;
      }
      return true;
    }
    
/*验证邮箱*/
function checkEmail(){
  var email=document.getElementById("email").value;
  var email_prompt=document.getElementById("email_prompt");
  email_prompt.innerHTML="";
  var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;    
    if(reg.test(email)==false){
      email_prompt.innerHTML="Email格式不正确，例如web@126.com";
    return false;
      }
      return true;
}

</script>
</head>

<body>
<table  class="main" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/top.gif"/></td>
  </tr>
  <form action="success.html" method="post" name="myform">
  <tr>
    <td class="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="left"><img src="images/pic001.gif" /></td>
    <td class="red"><img src="images/pic002.gif" style="vertical-align:bottom;"/>  欢迎您申请 SOHO联名信用卡 </td>
  </tr>
  <tr>
    <td class="left">登录名：</td>
    <td><input id="loginName" type="text" class="inputs" οnblur="checkLoginName()" /><div id="login_prompt" class="prompt"></div></td>
  </tr>
   <tr>
    <td class="left">登录密码：</td>
    <td><input id="pwd" type="password"  class="inputs" /><div id="pwd_prompt" class="prompt"></div></td>
  </tr>
  <tr>
    <td class="left">确认密码：</td>
    <td><input id="repwd" type="password"  class="inputs" /><div id="repwd_prompt" class="prompt"></div></td>
  </tr>
  <tr>
    <td class="left">身份证号码：</td>
    <td><input id="mycard" type="text" class="inputs" οnblur="checkMycard()" /><div id="mycard_prompt" class="prompt"></div></td>
  </tr>
  <tr>
    <td class="left">固定电话：</td>
    <td><input id="photo" type="text" class="inputs" οnblur="checkPhoto()" /><div id="photo_prompt" class="prompt"></div></td>
  </tr>
  <tr>
    <td class="left">手机号码：</td>
    <td><input id="mobile" type="text" class="inputs" /><div id="mobile_prompt" class="prompt"></div></td>
  </tr>
  <tr>
    <td class="left">电子邮件：</td>
    <td><input id="email" type="text" class="inputs" οnblur="checkEmail()" /><div id="email_prompt" class="prompt"></div></td>
  </tr>
  <tr>
    <td class="left">现居住地：</td>
    <td> <select  id="selProvince" οnchange="changeCity( )" style="width:100px">
        <option>--选择省份--</option>
      </select>
      <select  id="selCity"  style="width:100px">
             <option>--选择城市--</option></select></td>
  </tr>
  <tr>
    <td class="left">&nbsp;</td>
    <td><input id="btn" type="image" src="images/pic-sb.jpg" /></td>
  </tr>
</table>
</td>
  </tr>
  </form>
  <tr>
    <td><img src="images/bottom.jpg"/></td>
  </tr>
</table>
<script type="text/javascript">
var cityList = new Array();
     cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
     cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
     cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
     cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
     cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
     cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
     cityList['江苏省'] = ['南京市','苏州市','无锡市'];
     cityList['浙江省'] = ['杭州市','宁波市','温州市'];
     cityList['四川省'] = ['四川省','成都市'];
     cityList['海南省'] = ['海口市'];
     cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
     cityList['山东省'] = ['济南市','青岛市','烟台市'];
     cityList['江西省'] = ['江西省','南昌市'];
     cityList['广西省'] = ['柳州市','南宁市'];
     cityList['安徽省'] = ['安徽省','合肥市'];
     cityList['河北省'] = ['邯郸市','石家庄市'];
     cityList['河南省'] = ['郑州市','洛阳市'];
     cityList['湖北省'] = ['武汉市','宜昌市'];
     cityList['湖南省'] = ['湖南省','长沙市'];
     cityList['陕西省'] = ['陕西省','西安市'];
     cityList['山西省'] = ['山西省','太原市'];
     cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
     cityList['其他'] = ['其他'];
     
  function changeCity(){
     var province=document.getElementById("selProvince").value; 
     var city=document.getElementById("selCity");
     city.options.length=0; //清除当前city中的选项
    for (var i in cityList){
            if (i == province){
                for (var j in cityList[i]){
                    city.add(new Option(cityList[i][j],cityList[i][j]),null);
                }
            }
       }
  } 
  function allCity(){
      var province=document.getElementById("selProvince");
      for (var i in cityList){
         province.add(new Option(i, i),null); 
        }    
  }
    window.onload=allCity;
</script>
</body>

 

转载于:https://www.cnblogs.com/914556495wxkj/p/3426681.html

weixin_38168696
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
23444444444444444444444444444444
punklove的专栏
11-27 7421
<br /><br />一般我们如果实现省市级联效果，思路大致都如下：<br /> <br />1、利用省份下拉框的选项改变事件onChange<br />2、根据用户选择的省份，动态添加城市下拉框的值<br />第一种方式，也是最原始的方式Html代码 <span style="font-size: large;"><HTML>  <HEAD>  <META http-equiv="Content-Type" content="text/html; charset=gb2312">  <TITLE>注册<
二级下拉列表联动 select 网页 html5
小西瓜吖的博客
03-30 1923
学院、专业，二级联动的下拉列表
如何实现省市区的级联搜索
weixin_61298823的博客
03-11 663
省市区的级联搜索功能通过watch监听器去解决，监听省的数据，当省的数据发生改变以后，如果newValue里面有数据则调用市的方法，并清空市和县的输入框，如果没有的话则清空市以及县的搜索框和列表，剩下的同理
二级表单如何做html,JS+HTML简单实现表单二级联动效果
weixin_39555715的博客
07-12 901
表单选择栏二遇新是直朋能到分览级联动前开进架触我法端位画近发行思发们识和移的近言:表单的二级联动不可谓不重要,根据第一个选择栏的内容更改下一个选择栏的整体内容在一些场景下是必要的,所以今天以省市为例子利用JS+HTML实现简单的二级联动效果,仅二，都过发宗发数前业很断屏击和公图使分近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用...
datart BI 实现 省市县级联
关于运城的记忆的博客
12-29 526
基于datart BI 工具 实现 省市县级联关系
中国城市联级下拉菜单
07-10
总结来说，"中国城市联级下拉菜单"是一个全面涵盖中国所有省市城市的交互组件，其特点在于准确无误的数据和高效的用户交互设计。背后的开发工作涉及到数据收集、错误检查、前端技术的应用，以及可能的动态加载策略，...
省级联动+弹窗+首页布局（HTML+CSS+Jquery+DIV）
06-22
对于响应式设计，我们还需要考虑媒体查询（media queries），使得页面在不同设备和屏幕尺寸上都能良好显示。 SSM文件可能是Spring、SpringMVC和MyBatis框架的项目结构，这与前端的HTML、CSS和jQuery关联不大，但在...
安卓三级联动省市联动多级联动相关-android(三级联动)全国省市县下拉地址选择源码.zip
07-29
例如，当用户选择了一个省份，下拉框会显示与该省相关的所有城市；同样，选择城市后，县（区）的列表也会相应更新。这种联动效果是通过监听上一级选择的变化并触发下一级数据的加载来实现的。 源码中可能包含以下几...
ajax+mysql+jsp省市区三级联动显示
04-14
7. **测试与调试**：最后，进行全面的测试，确保所有省份、城市和区的选项都能正确显示和联动，同时检查数据的完整性和一致性。 总的来说，这个项目结合了前端、后端和数据库的知识，实现了动态的省市区选择功能，...
全国34个省包括2000多个区县 xml格式
02-18
实现“城市的二级联动效果”意味着该数据可能被用于开发一个Web应用或软件，其中用户在选择省份后，下拉菜单会自动显示出对应的市，接着选择市后，再出现相应的区县。这种功能常见于地址输入框，能够提高用户体验并...
javaScript省市级联
09-23
使用javaScript实现省市级联（二级级联，不能三级级联）
中国城市级联表SQL省市区一体表
11-01
此表是一体表，一个表包含了省市区 'ID', '父级id', '简称', '名称', '全称', '层级 0 1 2 省市区县', '拼音', '长途区号', '邮编', '首字母', '经度', '纬度',
省市级联
05-24
NULL 博文链接：https://zxlj2ee.iteye.com/blog/360217
省市级联完整代码
01-05
省市级联完整代码
全国省市二级联动下拉菜单 js版
11-22
本文实例为大家分享了js实现二级联动下拉菜单的具体代码，供大家参考，具体内容如下 js代码部分： /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined") return false; return true; } function chang
html 二级联动
mlle_123的博客
05-04 398
<div id="global_location"> <select id="country" name="country" class="country" data-first-title="选择国家/区域" onchange="countryArea()"> <option value="0">请选择国籍</...
html之二级联动
Quincy.Coder的博客
10-11 3180
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale
html省市二级简单联动,JS实现简单省市二级联动
weixin_34668147的博客
06-05 1144
刚始学习java刚好看到用js实现省市二级联动的效果，就想着写篇博客，顺便检验下自己的学习成果。好了废话少说先看看实际效果：技术分析：要实现这个功能呢，首先要用到html+js这里用建一个下拉列表，绑定onchange事件--请选择--湖北湖南河北河南好了下面是script部分了//1.创建一个二维数组用于存储省份和城市var cities = new Array(3);cities[0] = n...
二级联动--js
qq_40760617的博客
09-26 3418
在html部分只写两个select标签 option标签将用js的方法写入 onchange:内容发生改变事件  用于select下拉菜单中后的内容发生改变时候的触发 &lt;body&gt; &lt;select id="province" onchange="func1(this)"&gt; &lt;/select&gt; &lt;select id="city...
qtcombobox下拉显示多列
最新发布
06-25
Qt ComboBox（组合框）默认情况下是一个单列显示的控件，如果需要在下拉列表中显示多列数据，可以通过自定义模型（QStandardItemModel 或者 QTextTableModel）并设置模型的数据来实现。这里是一个简单的步骤指南： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值