省市级联

最新推荐文章于 2022-11-29 09:41:34 发布
最新推荐文章于 2022-11-29 09:41:34 发布
阅读量1.6k 收藏
点赞数
分类专栏： 技术分享 文章标签： stylesheet function html 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sha_xinyu/article/details/4457070
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>province.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <script>
 var data =
  [
  {
   name:"湖北",
   id:99,
   cities:[
    {name:"武汉",id:3},
    {name:"宜昌",id:9},
    {name:"荆州",id:6}]
  },
  {
   name:"湖南",
   id:88,
   cities:[
    {name:"长沙",id:4},
    {name:"岳阳",id:7},
    {name:"郴州",id:10}]
  
  },
  {
   name:"四川",
   id:77,
   cities:[
    {name:"成都",id:5},
    {name:"宜宾",id:11},
    {name:"绵阳",id:8},    
    {name:"自贡",id:12}]  
  }
 ];

 
 function fillProvince()
 {   
   for(var i=0;i<data.length;i++)
  { 
   var provincedata = data[i];
   var optProvince = new Option(provincedata.name,provincedata.id); 
   document.getElementById("provinceId").options.add(optProvince); 
  } 
 }
  
 function clearOptions(selElement)
 {
  var options = selElement.options;
  var len = options.length;
  /*for(var i=0;i<len;i++)
  {
   options.remove(0);
  }*/
  for(var i=len-1;i>=0;i--)
  {
   selElement.remove(i);
  }  
 }
 
 function fillCity(provinceIndex)
 {
  //document.getElementById("cityId").options.length=0;
  clearOptions(document.getElementById("cityId")); 
  var citydata = data[provinceIndex].cities;
  for(var i=0; i<citydata.length; i++)
  { 

   var optCity = new Option(citydata[i].name,citydata[i].id); 
   document.getElementById("cityId").options.add(optCity);
  } 
 
 }
 </script>
  </head>
 
  <body>
    <select id="provinceId" name="provinceId" onChange="fillCity(this.selectedIndex)">
   
    </select>
    <select id="cityId" name="cityId">
   
    </select>   
 <script>
  fillProvince();
  fillCity(document.getElementById("provinceId").selectedIndex);
 </script>  
  </body>
</html>

 

 

===========================================

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>province.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <script>
 var data = [["湖北","99","武汉","3","宜昌","9","荆州","6"],
  ["湖南","88","长沙","4","岳阳","7","郴州","10"],
  ["四川","77","成都","5","宜宾","11","绵阳","8","自贡","12"]];
 
 function fillProvince()
 {   

  /*讲课时先要用演示
   document.getElementById("provinceId")
    .options.add（new Option("武汉","3"）)；
   这种静态数据测试，以便基础差的学员更容易理解
   */
   //todo here!!!!!
   

   for(var i=0; i<data.length; i++){
    var provincedata = data[i];
    document.getElementById("provinceId").options.add(new Option(provincedata[0],provincedata[1]));
   }
 }
  
 function clearOptions(selElement)
 {
  var options = selElement.options;
  var len = options.length;
  /*for(var i=0;i<len;i++)
  {
   options.remove(0);
  }*/
  for(var i=len-1;i>=0;i--)
  {
   //options.remove(i);在火狐下不行
   selElement.remove(i);
  }  
 }
 
 function fillCity(provinceIndex)
 {
  //document.getElementById("cityId").options.length=0;
  clearOptions(document.getElementById("cityId")); 
  
   //todo here!!!!! 

   
   var citydata = data[provinceIndex];
   
   for(var j=1; j<citydata.length/2; j++){
    document.getElementById("cityId").options.add(new Option(citydata[j*2],citydata[j*2+1]));
   }
  
  
 }
 </script>
  </head>
 
  <body>
    <select id="provinceId" name="provinceId" onChange="fillCity(this.selectedIndex)">
   
    </select>
    <select id="cityId" name="cityId">
   
    </select>   
 <script>
  fillProvince();
  fillCity(document.getElementById("provinceId").selectedIndex);
 </script>  
  </body>
</html>

 

====================================================

 

 

sha_xinyu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax省市级联
07-29
ajax省市级联相当有用，可以根据项目需求进行改动
javaScript省市级联
09-23
使用javaScript实现省市级联（二级级联，不能三级级联）
JS实现省市级联
热门推荐
今天很快乐呀
09-03 1万+
现居住地： &lt;select id="selProvince" onchange="changeCity( )" style="width:100px"&gt; &lt;option&gt;--选择省份--&lt;/option&gt; &lt;/select&gt; &lt;select id="selCity" style=&qu
jq省市级联
weixin_44870643的博客
10-17 170
jq省市级联 ##前端页面 <label>省份:</label><select name="provinceName" id="province" ></select> <label>城市:</label><select name="cityName" id="city"></select> var ...
java 省市级联_java json 省市级联
weixin_39955149的博客
02-16 162
1 //获取国家省市区信息2 $(document).ready(function(){34 //从程序获取json格式的数据5 var info = $request.getAttribute("manualOrderAreaInfo");678 var provinceInfo = $("#provinceId");9 var cityId = $("#cityId");1011 //清空信息...
js省市级联
Y_G_LKW的博客
08-13 216
js省市级联 代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>用javascript(js)实现省市级联的效果</title> <style> body{ position:absolute; top...
JQuery实现省市级联
m0_53121631的博客
11-29 500
JQuery实现省市级联。
java省市级联接口_java json 省市级联
weixin_29579377的博客
02-27 341
// 获取国家省市区信息$(document).ready(function(){//从程序获取json格式的数据var info = $request.getAttribute("manualOrderAreaInfo");var provinceInfo = $("#provinceId");var cityId = $("#cityId");//清空信息provinceInfo.empty(...
mysql省市级联pid_全国省市级联sql表
weixin_35540389的博客
02-28 264
全国省市级联sql表【查询所有的省市区信息】SELECT*FROMhat_province AS pLEFT JOIN hat_city as c ON p.provinceID=c.fatherLEFT JOIN hat_area AS a ON c.cityID= a.father;对于后台获取到数据之后，可以按照以下数据格式返回给前端进行解析：[{"value": "130000","lab...
jQuery写省市级联
张先森
04-17 624
jq以前不会今天学了学，在我的理解jq是将js进行封装使其简单化，就是写的更少做的更多，今天算是了解了省市级联 这是HTML语言首先在form表单中设置两个下拉框；将其value值设置为0；selected是默认为首位 ...
Java实现省市级联
菜鸟进阶日记
08-26 779
数据库表设计 CREATE TABLE `Region` ( `RegionCode` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域代码', `ParentRegionCode` int(11) DEFAULT NULL COMMENT '父区域代码', `RegionLevel` int(11) DEFAULT NULL COMMENT '区域级别', `RegionName` varchar(255) CHARACTER SET utf8 DEF
省市级联列表
03-30
省市级联列表，数据库是SQLserver2008,大家可以参考一下，有什么需要改正的，可以提出来一起改正，大家一起学习。
移动端省市级联
11-14
移动端省市级联
安卓 spinner 实现省市级联
04-02
本人亲测，完全可以，完整代码，含layout布局文件代码
SSH结构的环境搭建及配置
sha_xinyu的专栏
08-11 2082
******************beans.xml****************** http://www.springframework.org/schema/beans"       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       xmlns:aop="http://www.springframework.o
JDBC基本例子
sha_xinyu的专栏
08-17 2024
public class Base { /**  * @param args  * @throws Exception  */ public static void main(String[] args) throws Exception {  template();  } static void template() throws Exception {  Connection co
购物网站3：订单实体类设计----配送方式--留言--订单--订单联系方式--订单配送信息--订单项--订单状态--支付方式
sha_xinyu的专栏
08-31 1573
 import javax.persistence.CascadeType;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.EnumType;import javax.persistence.Enumerated;import javax.persistence.Gen
javascript省市级联代码
最新发布
12-21
以下是一个简单的JavaScript省市级联代码的示例： ```javascript // 省份数据 var provinces = [ { name: "北京市", cities: ["北京市"] }, { name: "上海市", cities: ["上海市"] }, { name: "广东省", cities:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值