js省市联动(适合小白)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        var shengarr = ["湖北省", "湖南省", "广东省"];
        var city = [["武汉", "荆州", "仙桃", "恩施"], ["长沙", "湘潭", "岳阳", "韶山"], ["东莞", "广州", "佛山", "汕头"]];
        window.onload=function insertfun() {
            var vsheng = document.getElementById("sheng");
            for (var i = 0; i < shengarr.length; i++) {
                var opp = document.createElement("option");
                opp.innerHTML = shengarr[i];
                opp.value = i;
                vsheng.appendChild(opp);
            }
            insertcityfun();
        }
        function insertcityfun() {
            var id = document.getElementById("sheng").value;
            var vshi = document.getElementById("shi");
            vshi.options.length = 0;
            var cityarr = city[parseInt(id)];
            for (var i = 0; i < cityarr.length; i++) {
                var cpp = document.createElement("option");
                cpp.innerHTML = cityarr[i];
                cpp.value = i;
                vshi.appendChild(cpp);
            }
        }
    </script>
</head>
<body>
    <!--省市联动-->
    <select id="sheng" onchange="insertcityfun()">
    </select>
    <select id="shi"></select>
</body>
</html>

原文地址:https://www.cnblogs.com/JonlyZhang/p/9858835.html

时间: 2024-08-07 03:39:19

js省市联动(适合小白)的相关文章

原生JS省市联动,方便而且容易扩展

//省市联动cities = new Object(); cities['台湾']=new Array('台北','台南','其他'); cities['马来西亚']=new Array('Malaysia'); cities['北京']=new Array('北京'); cities['上海']=new Array('上海'); cities['天津']=new Array('天津'); cities['重庆']=new Array('重庆'); cities['河北省']=new Array

js省市联动

点击查看效果 <!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> JS实现的全国省份城市联动

js实现的省市联动

最近工作,要用到省市联动的功能.网上搜了一下,发现有很多这样的例子,看了不少实例,把觉得写得不错的代码穿上来,好给大家分享一下. <!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/199

省市联动 js

工作中见到这个省市联动代码,虽然很简单也能写出来,还是随便把它记录下来. //省市联动 function area(obj_id, area_pId, data_call_back) { if (area_pId == -1) return; $.ajax({ type: 'GET', url: "/SysAdmin/Pages/tb_supplierAdd.aspx", data: { area_pId: area_pId }, dataType: 'json', success:

jquery插件-省市联动

由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":&quo

Dynamic CRM 2013学习笔记(八)过滤查找控件 (类似省市联动)

我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤查找控件来实现.本文主要介绍基本的查找控件过滤.多表关联的复杂过滤以及子表里实现查找控件的过滤.   一.简单的过滤 先看下需求: 按"Special GL Indicator" 来过滤 Posting 查找控件增加了preSearch事件.它发生在查找控件显示对话框供用户查找记录之前,与

Json 基于jQuery+JSON的省市联动效果

helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 查看演示 下载源码 HTML 首先在head中载入jquery库和cityselect插件. <script type="tex

省市联动效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="d

基于jQuery+JSON的省市联动效果

<!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 http-equiv="Content-