javascript省市级联方式

最新推荐文章于 2024-04-28 10:45:38 发布
最新推荐文章于 2024-04-28 10:45:38 发布
阅读量972 收藏 2
点赞数
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32914323/article/details/50718705
版权
第一种：
<html>
<head>
<title>省市级联</title>
<script type="text/javascript">
var prodd = new Array();
prodd[0]=['奉节','永川','万州','巫山'];
prodd[1]=['济南','青岛','烟台','威海'];
function shengCity(){
var Sheng_v=document.getElementById("Sheng").value;
var pro=parseInt(Sheng_v);
if(pro!=0){
pro=pro-1;
}
var city_v=document.getElementById("City");

document.getElementById("City").options.length=0;

for(var i=0;i<prodd[pro].length;i++){
city_v.value=prodd[pro][i];
var option=new Option(prodd[pro][i]);
city_v.add(option);
}

}
</script>
</head>
<body>
<form id="form1" action="" method="post" />
 省市级联效果：
 <select id="Sheng" οnchange="shengCity()">
<option value="0">请选择...</option>
<option value="1">重庆市</option>
<option value="2">山东省</option>
 </select>
 <select id="City">
 </select>
</form>
</body>
</html>
第二种：
<html>
<head>
<title>省市级联</title>
<script type="text/javascript">
var prodd = new Array();
prodd[0]=['奉节','永川','万州','巫山'];
prodd[1]=['济南','青岛','烟台','威海'];
function changeCity(){
var select_pro_obj=document.getElementById("province");
var pro_value = select_pro_obj.value;
if(pro_value != "0"){
var num_value = parseInt(pro_value);
pro_value = num_value - 1;
}

var select_city_obj = document.getElementById("city");

select_city_obj.options.length = 0;

var city_arr = proArr[pro_value];

for(var i = 0; i < city_arr.length;i++){

var option = new Option();
option.innerHTML = city_arr[i];
select_city_obj.add(option);
}

}
</script>
</head>
<body>
<form id="form1" action="" method="post" />
 省市级联效果：
 <select id="Sheng" οnchange="shengCity()">
<option value="0">请选择...</option>
<option value="1">重庆市</option>
<option value="2">山东省</option>
 </select>
 <select id="City">
 </select>
</form>
</body>
</html>
第三种：
<html>
<head>
<title>省市级联</title>
<script type="text/javascript">
var proArr = new Array();
  proArr['山东省']=['济南','青岛','烟台','威海'];
  proArr['湖南省']=['长沙','怀化','郴州'];
  
  function chgCity(){
  /*
for(var i=0; i<proArr["山东省"].length; i++)
alert(proArr["山东省"][i]);
  */
// 获取选中的省
var pro = document.getElementById("selProvince").value;


//清空city下拉列表中的原有选项
document.getElementById("selCity").options.length = 0;

// 根据省,找到对应的城市 proArr[pro]
//遍历,动态把城市添加到city下拉列表
//proArr[pro]
var opt1;
for(var i=0; i<proArr[pro].length; i++){
opt1 = new Option(proArr[pro][i], proArr[pro][i]);
document.getElementById("selCity").add(opt1);
}

  }
</script>
</head>
<body>
<form id="form1" action="" method="post" />
 省市级联效果：
 <select id="selProvince" οnchange="chgCity()">
<option value="">请选择...</option>
<option value="山东省">山东省</option>
<option value="湖南省">湖南省</option>
</select>
<select id="selCity">
  </select>
</form>
</body>
</html>
java开发小白
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现省份、城市的级联选择
请叫我林小李的博客
11-21 9844
JS实现省份、城市的级联选择实现省份、城市的级联选择，可以用纯JS实现，当然也可以使用jquery实现，下面就讲一下如何用纯javascript实现。 其实实现JS这个很简单，有两点需要注意： 1、对省份的下拉框的onchange事件进行监听，一旦省份被改变，那么就去xml资源文件里获取对应的城市，创建新的option节点，将之挂载在城市节点下。 2、有个地方需要注意，在监听事件里，首先需要先
实现简单的省市联动(通过HTML和JS)
Kaka_csdn14的博客
11-16 4822
这篇文章主要为大家详细介绍了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
html实现省市县三级联动
最新发布
qq_61585709的博客
04-28 182
【代码】html实现省市县三级联动。
javascript省级联动
weixin_55491533的博客
05-29 447
一：省级联动菜单 HTML部分代码 如下图所示 有两个下拉标签组成 当select元素的option的选项发生改变时，触发onChange事件 css代码如图所示 效果如图 分析：JavaScript代码 1.第一步：回填省份下拉表 Var SFarray=[‘湖北’, ’湖南’, ‘广东’]; 2获取省份select元素 var SFselect = document.getElementById('province'); 3. 在省份元素里...
javaScript省市级联
09-23
使用javaScript实现省市级联（二级级联，不能三级级联）
JavaScript省市级联下拉菜单实例
10-20
JavaScript省市级联下拉菜单是一种常见的前端交互设计，主要用于用户选择地理位置时的便捷操作。在这个实例中，我们看到一个简单的HTML结构，包含了两个`<select>`元素，分别用于表示省份和城市的选择。当用户在省份...
javascript省市级联功能实现方法实例详解
10-23
主要介绍了javascript省市级联功能实现方法,以不同实例形式分析了JavaScript实现省市级联菜单的具体技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript基于DOM实现省市级联下拉框的方法
10-24
主要介绍了javascript基于DOM实现省市级联下拉框的方法,可实现选择省份后出现对应城市下拉框选项的功能,非常具有实用价值,需要的朋友可以参考下
javascript省市级联
08-06
JavaScript省市级联是一种常见的前端交互功能，主要用于网页上的地址选择，让用户先选择省份，然后根据所选省份动态加载并显示对应的地级市列表。这种功能在注册、订单填写等需要获取用户详细地址的场景中非常常见。...
js 实现省市区/县三级联动
PSG_li的博客
05-24 2014
js 实现省市区/县三级联动。
js实现省市联动
热门推荐
纳兰小羽
04-29 2万+
<br />效果图如下：<br /><br />思路很简单，就是先加载省信息，然后当省改变的时候加载市县信息。烦的是数据的录入，代码如下<br /><!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> <meta ht
js省市级联 三级联动菜单
weixin_30783629的博客
07-27 160
直接粘贴先来，保存为HTML格式的即可。 ------------------从此粘贴源码------------ <html><head><title>省市级联</title></head><body><script language="javascript">/*实现省市级联效果*/v...
Ajax常用实例
weixin_34187862的博客
04-28 107
1. 级联下拉列表 例1.1 级联下拉列表。 （1）编写AjaxRequest.js文件，并将其保存到JS文件夹中。AjaxRequest.js的具体代码如下： var net = new Object(); //定义一个全局变量net //编写构造函数 net.AjaxRequest=function(url,onload,onerror,method,params){ ...
JavaScript点滴记录（二）
jeyson的博客
03-04 525
知识梳理：     接着上一次的来说，在javascript中还定义了判断是否具有子节点的方法：haschildNodes:例如：var booleanCityNodes=cityNode.hasAttributes();当然这里是判断是否具有属性子节点。不过用法大致差不多，这里就不做赘述了。对于属性节点，当我们获取之后可以直接进行set和get的操作的，具体做法是：节点名.setAttribu
jquery之new Option(） 二联动、三联动、四联动菜单（part1）
Super Livia
03-11 1721
今天看了一個很有意思的屬性，在日常中也可以用到，也有很多人寫過，自己也來總結一下。 基本內容解說： 1:add() 方法用于向 <select> 添加一个 <option> 元素。 2:new Option() 创建一个option标签 3:Two.options.add(twoop, null);最後輸出要這樣寫才正確喲！ 4：new Option(i,i...
【Web 设计中 new Option()的用法】
weixin_42543416的博客
06-22 706
利用new Option()可以给select以及datalist元素动态增加列表选项。
（五） 数组
土豆的小秘密的博客
12-18 370
（五）  数组 （1）下来列表框的级联     下拉列表框的属性：                 length      可读可写                           length = 0  表示对选项清空                 value                        options      下拉列表框的所有
javascript省市级联代码
12-21
以下是一个简单的JavaScript省市级联代码的示例： ```javascript // 省份数据 var provinces = [ { name: "北京市", cities: ["北京市"] }, { name: "上海市", cities: ["上海市"] }, { name: "广东省", cities: ["广州市", "深圳市", "珠海市"] }, // 其他省份数据... ]; // 城市数据 var cities = { "北京市": ["东城区", "西城区", "朝阳区", "海淀区"], "上海市": ["黄浦区", "徐汇区", "静安区", "普陀区"], "广州市": ["天河区", "越秀区", "海珠区", "荔湾区"], "深圳市": ["福田区", "罗湖区", "南山区", "宝安区"], "珠海市": ["香洲区", "斗门区", "金湾区"], // 其他城市数据... }; // 省份下拉框 var provinceSelect = document.getElementById("province"); // 城市下拉框 var citySelect = document.getElementById("city"); // 初始化省份下拉框 for (var i = 0; i < provinces.length; i++) { var option = document.createElement("option"); option.text = provinces[i].name; provinceSelect.add(option); } // 省份下拉框改变事件 provinceSelect.addEventListener("change", function() { // 清空城市下拉框 citySelect.innerHTML = ""; // 获取选中的省份 var selectedProvince = provinceSelect.value; // 根据选中的省份获取对应的城市数据 var selectedCities = cities[selectedProvince]; // 初始化城市下拉框 for (var i = 0; i < selectedCities.length; i++) { var option = document.createElement("option"); option.text = selectedCities[i]; citySelect.add(option); } }); ``` 这段代码实现了一个简单的省市级联功能。当选择省份时，城市下拉框会根据选中的省份动态更新显示对应的城市列表。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值