首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

用js兑现城市级联(原创简单实用)

2012-07-15 
用js实现城市级联(原创简单实用)%@ page languagejava importjava.util.* pageEncodingUTF-8%

用js实现城市级联(原创简单实用)

<%@ 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>    <title>My JSP 'index.jsp' starting page</title>    <script src="common/js/jquery.js" type="text/javascript"></script>    <script src="common/js/city.js" type="text/javascript"></script>     <script>    function getV(){    var p = $("#country").val();    var p2 = $("#province").val();    var p3 = $("#city").val();    var p4 = document.getElementById("country").options[document.getElementById("country").selectedIndex].text;    alert(p);    alert(p2);    alert(p3);    alert(p4);    }    </script>  </head>  <body onLoad="getCountry()">  <select id="country" onChange="getProvince()">  <option value="0">--请选择国家--</option>  </select>  <select id="province" onChange="getCity()">  <option value="0">--请选择省份--</option>  </select>  <select id="city">  <option value="0">--请选择城市--</option>  </select>  <input type="button" name="bt" id="bt" value="获取选择的值" onclick="getV()"/>  </body></html>

?

/** 城市级联js **/var country = new Array();var province = new Array();var city = new Array();DataInit();/** 初始化城市数据 **/function DataInit(){country[0] = new Array("ZG","中国");country[1] = new Array("MG","美国");province[0] = new Array("GD","广东","ZG");province[1] = new Array("HB","湖北","ZG");province[2] = new Array("JX","江西","ZG");province[3] = new Array("MG1","Am1","MG");city[0] = new Array("GZ","广州","GD");city[1] = new Array("SZ","深圳","GD");city[2] = new Array("WH","武汉","HB");city[3] = new Array("JJ","九江","JX");}/** 获取国家列表 **/function getCountry(){var countryList = document.getElementById("country");countryList.options.length = 0;countryList.options[0] = new Option("---请选择国家---",0);for(i = 0;i < country.length;i ++){countryList.options[i+1] = new Option(country[i][1],country[i][0]);}}/** 根据选择的国家获取省份列表 **/function getProvince(){var p = $("#country").val();var provinceList = document.getElementById("province");provinceList.options.length = 0;provinceList.options[0] = new Option("---请选择省份---",0);var cityList = document.getElementById("city");cityList.options.length = 0;cityList.options[0] = new Option("---请选择城市---",0);var count = 0;for(var j = 0;j < province.length;j ++){if(province[j][2] == p){count ++;provinceList.options[count] = new Option(province[j][1],province[j][0]);}}}/** 根据选择的省份获取城市列表 **/function getCity(){var p = $("#province").val();var cityList = document.getElementById("city");cityList.options.length = 0;cityList.options[0] = new Option("---请选择城市---",0);var count = 0;for(var j = 0;j < city.length;j ++){if(city[j][2] == p){count ++;cityList.options[count] = new Option(city[j][1],city[j][0]);}}}

?

热点排行