`

js实现简易省市联动

    博客分类:
  • web
阅读更多

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>省市联动js版</title>
   
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type='text/javascript' src='js/jquery-latest.js'></script>
    <script type="text/javascript" language="javascript">
    function change()
    {
        var cityList=new Array();
        cityList['空']=['请选择城市'];
        cityList['湖北']=['请选择城市','武汉','宜昌','荆州'];
        cityList['湖南']=['请选择城市','长沙','湘潭','怀化'];
        cityList['安徽']=['请选择城市','合肥','淮南','安庆','六安'];
        var index=document.myForm.pro.value;//当pro改变时,获取pro选中的value
        document.myForm.city.options.length=0;
        for(var i in cityList[index]){//遍历pro选中的value所对应的数组
            document.myForm.city.options.add(new Option(cityList[index][i],cityList[index][i]));//向city中添加选项,选项为(数组[省份名][数组下标])
        }
       
    }
    function onSelect()
    {
      alert($("#pro").find("option:selected").text());//得到被选中的省份
      alert($("#city").find("option:selected").text());//得到被选中的城市
    }
       
    </script>

  </head>
 
  <body>
    <form name="myForm" method="post">
    <select id="pro" name="pro" onChange="change()" >
    <option value="空">请选择省份</option>
    <option value="湖北">湖北省</option>
    <option value="湖南">湖南省</option>
    <option value="安徽">安徽省</option>
    </select>
    <select id="city" name="city">
    <option>请选择城市</option>
    </select>
    <input type="submit" value="提交" onclick="onSelect()"/>
    </form>
  </body>
</html>

分享到:
评论

相关推荐

    XML与JS实现地区省市联动菜单

    一个自己写的,非常全面的xml与JS实现省市联动菜单,让你更加方便了解该内容

    js2级省市联动下拉框

    总结来说,"js2级省市联动下拉框"的核心是使用JavaScript监听省份选择的变化,并据此动态更新城市选择。这涉及到HTML、CSS和JavaScript的基本知识,以及对DOM操作和事件处理的理解。通过合理的设计和优化,可以创建...

    用JSON实现的省市联动

    在省市联动的实现中,Servlet充当了后端数据处理的角色,它获取到前端发送的请求(如省份选择),然后查询数据库以获取对应城市的列表。 接下来,AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面的...

    ajax实现省市联动

    【Ajax实现省市联动】是一种常见的前端交互功能,它在用户选择省份时自动更新下拉框中的城市选项,提供无缝的用户体验。这个功能的核心是利用Ajax(异步JavaScript和XML)技术,结合HTML、CSS和JavaScript进行页面...

    Ajax实现省市联动效果

    在网页设计和开发中,Ajax(Asynchronous JavaScript and XML)技术是一种非常...理解并掌握Ajax实现省市联动效果,对于前端开发者来说是必备的技能之一,它不仅提升了用户体验,也是现代Web开发中不可或缺的一部分。

    jquery实现省市联动的例子

    至此,我们就完成了省市联动的基本实现。这个例子展示了jQuery如何与HTML元素交互,以及如何使用JavaScript处理用户事件。值得注意的是,这里的数据是硬编码的,如果需要动态获取数据,可以考虑从JSON文件或API接口...

    [转帖]jQuery实现省市联动

    标题中的“jQuery实现省市联动”是指在Web应用中,通过jQuery库来实现在选择省份时,下拉框(或其它选择组件)中的城市选项能够自动更新,以展示与所选省份对应的城市列表。这种功能常见于地址输入或者注册表单中,...

    省市联动js

    省市联动,包含全国三级城市联动 js版,直接运用,简单方便

    省市联动jquery+struts2

    标题中的“省市联动jQuery+Struts2”是指在Web开发中使用jQuery库和Struts2框架实现的一个功能,即当用户选择一个省份时,相关的城市会动态地在下拉列表中加载出来,提供用户选择。这个功能在很多需要收集用户地址...

    js实现移动端省市区三级联动选择器效果

    通过以上步骤,我们可以利用JavaScript实现一个高效、灵活的移动端省市区三级联动选择器。在实际项目中,还可以结合前端框架(如Vue、React等)或第三方库(如jQuery UI)来简化开发过程,提高代码的可维护性和可...

    全js实现省市县联动

    Province City Area Selector 省、市、地区联动选择JS封装类

    纯js实现省市区三级联动

    在"纯js实现省市区三级联动"的项目中,开发者通过JavaScript代码,创建了三个下拉列表,分别代表省份、城市和区县。这些下拉列表的数据来源通常是JSON格式,因为JSON是一种轻量级的数据交换格式,易于人阅读和编写,...

    js省市联动 其他

    标题中的"js省市联动"指的是在前端开发中,使用JavaScript实现省市区选择框的联动效果。这是一种常见的功能,用户在选择省份时,市、区的选择框会根据所选省份动态更新选项,提供与省份相关联的下级行政区域供用户...

    绝对经典省市联动 自由定制

    在实现省市联动的过程中,开发者通常会使用JavaScript(如jQuery、Vue.js、React.js等)进行前端的交互逻辑编写,利用Ajax异步请求获取服务器上的数据。后端可以采用PHP、Python、Java等服务器语言,配合数据库(如...

    基于javaweb和ajax的省市联动实现

    总结来说,"基于Ajax的省市联动实现"是通过结合JavaScript的Ajax技术和JSON数据格式,实现在JavaWeb应用中动态加载和更新市的下拉列表。这个过程涉及客户端的事件监听、Ajax请求、JSON数据解析,以及服务器端的JSON...

    js实现省市县三级联动 2020年最新地区定义

    js实现省市县三级联动 2020年最新地区定义

    ajax省市联动源码

    例如,使用Node.js和Express框架,我们可以创建一个路由来处理省市联动的请求: ```javascript const express = require('express'); const app = express(); app.use(express.json()); app.get('/api/cities', ...

    省市联动ACCESS表与javascript

    标题中的“省市联动ACCESS表与javascript”指的是在网页开发中,使用JavaScript实现的基于ACCESS数据库的中国省市区三级联动选择功能。这种功能常见于需要用户输入详细地址的表单中,用户选择省份后,下拉菜单会自动...

    uni-app实现省市区三级联动的js文件

    本文件是uni-app实现省市区三级联动中的data.js文件,详情见博客:https://whhtjl.blog.csdn.net/article/details/109216246

Global site tag (gtag.js) - Google Analytics