当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS+XML 省份和城市之间的联动实现代码

Javascript
JavaScript中出现乱码的处理心得
JQuery 写的个性导航菜单
Jquery 高亮显示文本中重要的关键字
使用jQuery获取radio/checkbox组的值的代码收集
jquery 弹出登录窗口实现代码
JQuery与iframe交互实现代码
Javascript 键盘keyCode键码值表
javascript 事件加载与预加载
javascript 处理事件绑定的一些兼容写法
javascript 鼠标事件总结
javascript 异步的innerHTML使用分析
javascript 键盘事件总结 推荐
javascript Array对象使用小结
再谈javascript 动态添加样式规则 W3C校检
用Javascript同时提交多个Web表单的方法
javascript 闪烁的圣诞树实现代码
键盘上下键移动选择table表格行的js代码
javascript 计算两个整数的百分比值
js tab效果的实现代码
默认让页面的第一个控件选中的javascript代码

Javascript 中的 JS+XML 省份和城市之间的联动实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 58 ::
收藏到网摘: n/a

用JS来操作一个XML文档来实现一个简单的表单联动 xml:
Provinces.xml
复制代码 代码如下:

<?xml version="1.0"?>
<Root>
<Province ID="1" Name="安徽">
<City ID="1">安庆市</City>
<City ID="2">蚌埠市</City>
<City ID="3">亳州市</City>
<City ID="4">巢湖市</City>
<City ID="5">池州市</City>
<City ID="6">滁州市</City>
<City ID="7">阜阳市</City>
<City ID="8">合肥市</City>
<City ID="9">淮北市</City>
<City ID="10">淮南市</City>
<City ID="11">黄山市</City>
<City ID="12">六安市</City>
<City ID="13">马鞍山市</City>
<City ID="14">宿州市</City>
<City ID="15">铜陵市</City>
<City ID="16">芜湖市</City>
<City ID="17">宣城市</City>
</Province>
<Province ID="2" Name="北京">
<City ID="18">昌平区</City>
<City ID="19">朝阳区</City>
<City ID="20">崇文区</City>
<City ID="21">大兴区</City>
<City ID="22">东城区</City>
<City ID="23">房山区</City>
<City ID="24">丰台区</City>
<City ID="25">海淀区</City>
<City ID="26">怀柔区</City>
<City ID="27">门头沟区</City>
<City ID="28">密云县</City>
<City ID="29">平谷区</City>
<City ID="30">石景山区</City>
<City ID="31">顺义区</City>
<City ID="32">通州区</City>
<City ID="33">西城区</City>
<City ID="34">宣武区</City>
<City ID="35">延庆县</City>
</Province>
<Province ID="3" Name="重庆">
<City ID="36">巴南区</City>
<City ID="37">北碚区</City>
<City ID="38">长寿区</City>
<City ID="39">达州市</City>
<City ID="40">涪陵区</City>
<City ID="41">江北区</City>
<City ID="42">九龙坡区</City>
<City ID="43">南岸区</City>
<City ID="44">黔江区</City>
<City ID="45">沙坪坝区</City>
<City ID="46">双桥区</City>
<City ID="47">万盛区</City>
<City ID="48">万州区</City>
<City ID="49">渝北区</City>
<City ID="50">渝中区</City>
<City ID="51">璧山县</City>
<City ID="52">城口县</City>
<City ID="53">大足县</City>
<City ID="54">垫江县</City>
<City ID="55">丰都县</City>
<City ID="56">奉节县</City>
<City ID="57">合川市</City>
<City ID="58">江津市</City>
<City ID="59">开县</City>
<City ID="60">梁平县</City>
<City ID="61">南川市</City>
<City ID="62">彭水苗族土家族自治县</City>
<City ID="63">綦江县</City>
<City ID="64">荣昌县</City>
<City ID="65">石柱土家族自治县</City>
<City ID="66">铜梁县</City>
<City ID="67">潼南县</City>
<City ID="68">巫山县</City>
<City ID="69">巫溪县</City>
<City ID="70">武隆县</City>
<City ID="71">秀山土家族苗族自治县</City>
<City ID="72">永川市</City>
<City ID="73">酉阳土家族苗族自治县</City>
<City ID="74">云阳县</City>
<City ID="75">忠县</City>
</Province>
<Province ID="4" Name="福建">
<City ID="76">城厢区</City>
<City ID="77">福州市</City>
<City ID="78">涵江区</City>
<City ID="79">荔城区</City>
<City ID="80">龙岩市</City>
<City ID="81">南平市</City>
<City ID="82">宁德市</City>
<City ID="83">莆田市</City>
<City ID="84">泉州市</City>
<City ID="85">三明市</City>
<City ID="86">厦门市</City>
<City ID="87">秀屿区</City>
<City ID="88">秀屿区</City>
<City ID="89">漳州市</City>
</Province>
<Province ID="5" Name="甘肃">
<City ID="90">白银市</City>
<City ID="91">定西市</City>
<City ID="92">甘南州</City>
<City ID="93">海南州</City>
<City ID="94">金昌市</City>
<City ID="95">酒泉市</City>
<City ID="96">兰州市</City>
<City ID="97">临夏州</City>
<City ID="98">陇南市</City>
<City ID="99">平凉市</City>
<City ID="100">庆阳市</City>
<City ID="101">天水市</City>
<City ID="102">武威市</City>
<City ID="103">张掖市</City>
</Province>
<Province ID="6" Name="广东">
<City ID="104">潮州市</City>
<City ID="105">东莞市</City>
<City ID="106">佛山市</City>
<City ID="107">广州市</City>
<City ID="108">河源市</City>
<City ID="109">惠州市</City>
<City ID="110">江门市</City>
<City ID="111">揭阳市</City>
<City ID="112">茂名市</City>
<City ID="113">梅州市</City>
<City ID="114">清远市</City>
<City ID="115">汕头市</City>
<City ID="116">汕尾市</City>
<City ID="117">韶关市</City>
<City ID="118">深圳市</City>
<City ID="119">阳江市</City>
<City ID="120">云浮市</City>
<City ID="121">湛江市</City>
<City ID="122">肇庆市</City>
<City ID="123">中山市</City>
<City ID="124">珠海市</City>
</Province>
<Province ID="7" Name="广西">
<City ID="125">百色市</City>
<City ID="126">北海市</City>
<City ID="127">崇左市</City>
<City ID="128">防城港市</City>
<City ID="129">贵港市</City>
<City ID="130">桂林市</City>
<City ID="131">河池市</City>
<City ID="132">贺州市</City>
<City ID="133">来宾市</City>
<City ID="134">柳州市</City>
<City ID="135">南宁市</City>
<City ID="136">钦州市</City>
<City ID="137">梧州市</City>
<City ID="138">玉林市</City>
</Province>
<Province ID="8" Name="贵州">
<City ID="139">安顺市</City>
<City ID="140">毕节地区</City>
<City ID="141">贵阳市</City>
<City ID="142">六盘水市</City>
<City ID="143">黔东南苗族侗族自治州</City>
<City ID="144">黔南布依族苗族自治州</City>
<City ID="145">黔西南布依族苗族自治州</City>
<City ID="146">铜仁地区</City>
<City ID="147">遵义市</City>
</Province>
<Province ID="9" Name="海南">
<City ID="148">海口市</City>
<City ID="149">海南沿革</City>
<City ID="150">三亚市</City>
<City ID="151">大渡口区</City>
</Province>
<Province ID="10" Name="河北">
<City ID="152">保定市</City>
<City ID="153">沧州市</City>
<City ID="154">承德市</City>
<City ID="155">邯郸市</City>
<City ID="156">衡水市</City>
<City ID="157">廊坊市</City>
<City ID="158">秦皇岛市</City>
<City ID="159">石家庄市</City>
<City ID="160">唐山市</City>
<City ID="161">邢台市</City>
<City ID="162">张家口市</City>
</Province>
<Province ID="11" Name="河南">
<City ID="163">安阳市</City>
<City ID="164">鹤壁市</City>
<City ID="165">焦作市</City>
<City ID="166">开封市</City>
<City ID="167">洛阳市</City>
<City ID="168">漯河市</City>
<City ID="169">南阳市</City>
<City ID="170">平顶山市</City>
<City ID="171">濮阳市</City>
<City ID="172">三门峡市</City>
<City ID="173">商丘市</City>
<City ID="174">新乡市</City>
<City ID="175">信阳市</City>
<City ID="176">许昌市</City>
<City ID="177">郑州市</City>
<City ID="178">周口市</City>
<City ID="179">驻马店市</City>
</Province>
<Province ID="12" Name="黑龙江">
<City ID="180">大庆市</City>
<City ID="181">大兴安岭地区</City>
<City ID="182">哈尔滨市</City>
<City ID="183">鹤岗市</City>
<City ID="184">黑河市</City>
<City ID="185">鸡西市</City>
<City ID="186">佳木斯市</City>
<City ID="187">牡丹江市</City>
<City ID="188">七台河市</City>
<City ID="189">齐齐哈尔市</City>
<City ID="190">双鸭山市</City>
<City ID="191">绥化市</City>
<City ID="192">伊春市</City>
</Province>
<Province ID="13" Name="湖北">
<City ID="193">鄂州市</City>
<City ID="194">恩施土家族苗族自治州</City>
<City ID="195">黄冈市</City>
<City ID="196">黄石市</City>
<City ID="197">荆门市</City>
<City ID="198">荆州市</City>
<City ID="199">十堰市</City>
<City ID="200">随州市</City>
<City ID="201">武汉市</City>
<City ID="202">咸宁市</City>
<City ID="203">襄樊市</City>
<City ID="204">孝感市</City>
<City ID="205">宜昌市</City>
</Province>
<Province ID="14" Name="湖南">
<City ID="206">长沙市</City>
<City ID="207">常德市</City>
<City ID="208">郴州市</City>
<City ID="209">衡阳市</City>
<City ID="210">怀化市</City>
<City ID="211">娄底市</City>
<City ID="212">邵阳市</City>
<City ID="213">湘潭市</City>
<City ID="214">湘西土家族苗族自治州</City>
<City ID="215">益阳市</City>
<City ID="216">永州市</City>
<City ID="217">岳阳市</City>
<City ID="218">张家界市</City>
<City ID="219">株洲市</City>
</Province>
<Province ID="15" Name="吉林">
<City ID="220">白城市</City>
<City ID="221">白山市</City>
<City ID="222">长春市</City>
<City ID="223">吉林市</City>
<City ID="224">辽源市</City>
<City ID="225">四平市</City>
<City ID="226">松原市</City>
<City ID="227">通化市</City>
<City ID="228">延边朝鲜族自治州</City>
</Province>
<Province ID="16" Name="江苏">
<City ID="229">常州市</City>
<City ID="230">淮安市</City>
<City ID="231">连云港市</City>
<City ID="232">南京市</City>
<City ID="233">南通市</City>
<City ID="234">苏州市</City>
<City ID="235">宿迁市</City>
<City ID="236">泰州市</City>
<City ID="237">无锡市</City>
<City ID="238">徐州市</City>
<City ID="239">盐城市</City>
<City ID="240">扬州市</City>
<City ID="241">镇江市</City>
</Province>
<Province ID="17" Name="江西">
<City ID="242">抚州市</City>
<City ID="243">赣州市</City>
<City ID="244">吉安市</City>
<City ID="245">景德镇市</City>
<City ID="246">九江市</City>
<City ID="247">南昌市</City>
<City ID="248">萍乡市</City>
<City ID="249">上饶市</City>
<City ID="250">新余市</City>
<City ID="251">宜春市</City>
<City ID="252">鹰潭市</City>
</Province>
<Province ID="18" Name="辽宁">
<City ID="253">鞍山市</City>
<City ID="254">本溪市</City>
<City ID="255">朝阳市</City>
<City ID="256">大连市</City>
<City ID="257">丹东市</City>
<City ID="258">抚顺市</City>
<City ID="259">阜新市</City>
<City ID="260">葫芦岛市</City>
<City ID="261">锦州市</City>
<City ID="262">辽阳市</City>
<City ID="263">盘锦市</City>
<City ID="264">沈阳市</City>
<City ID="265">铁岭市</City>
<City ID="266">营口市</City>
</Province>
<Province ID="19" Name="内蒙">
<City ID="267">阿拉善盟</City>
<City ID="268">巴彦淖尔市</City>
<City ID="269">包头市</City>
<City ID="270">赤峰市</City>
<City ID="271">鄂尔多斯市</City>
<City ID="272">呼和浩特市</City>
<City ID="273">呼伦贝尔市</City>
<City ID="274">通辽市</City>
<City ID="275">乌海市</City>
<City ID="276">乌兰察布市</City>
<City ID="277">锡林郭勒盟</City>
<City ID="278">兴安盟</City>
</Province>
<Province ID="20" Name="宁夏">
<City ID="279">固原市</City>
<City ID="280">石嘴山市</City>
<City ID="281">吴忠市</City>
<City ID="282">博尔塔拉州</City>
<City ID="283">中卫市</City>
<City ID="440">银川市</City>
</Province>
<Province ID="21" Name="青海">
<City ID="284">果洛州</City>
<City ID="285">海北州</City>
<City ID="286">海东地区</City>
<City ID="287">银川市</City>
<City ID="288">海西州</City>
<City ID="289">黄南州</City>
<City ID="290">西宁市</City>
<City ID="291">玉树州</City>
</Province>
<Province ID="22" Name="山东">
<City ID="292">滨州市</City>
<City ID="293">德州市</City>
<City ID="294">东营市</City>
<City ID="295">菏泽市</City>
<City ID="296">济南市</City>
<City ID="297">济宁市</City>
<City ID="298">莱芜市</City>
<City ID="299">聊城市</City>
<City ID="300">临沂市</City>
<City ID="301">青岛市</City>
<City ID="302">日照市</City>
<City ID="303">泰安市</City>
<City ID="304">威海市</City>
<City ID="305">潍坊市</City>
<City ID="306">烟台市</City>
<City ID="307">枣庄市</City>
<City ID="308">淄博市</City>
</Province>
<Province ID="23" Name="山西">
<City ID="309">长治市</City>
<City ID="310">大宁县</City>
<City ID="311">大同市</City>
<City ID="312">晋城市</City>
<City ID="313">晋中市</City>
<City ID="314">临汾市</City>
<City ID="315">吕梁市</City>
<City ID="316">朔州市</City>
<City ID="317">太原市</City>
<City ID="318">忻州市</City>
<City ID="319">阳泉市</City>
<City ID="320">运城市</City>
</Province>
<Province ID="24" Name="陕西">
<City ID="321">安康市</City>
<City ID="322">宝鸡市</City>
<City ID="323">汉中市</City>
<City ID="324">嘉峪关市</City>
<City ID="325">铜川市</City>
<City ID="326">渭南市</City>
<City ID="327">西安市</City>
<City ID="328">咸阳市</City>
<City ID="329">延安市</City>
<City ID="330">榆林市</City>
</Province>
<Province ID="25" Name="上海">
<City ID="331">宝山区</City>
<City ID="332">长宁区</City>
<City ID="333">崇明县</City>
<City ID="334">奉贤区</City>
<City ID="335">虹口区</City>
<City ID="336">黄浦区</City>
<City ID="337">嘉定区</City>
<City ID="338">金山区</City>
<City ID="339">静安区</City>
<City ID="340">卢湾区</City>
<City ID="341">闵行区</City>
<City ID="342">南汇区</City>
<City ID="343">浦东新区</City>
<City ID="344">普陀区</City>
<City ID="345">青浦区</City>
<City ID="346">松江区</City>
<City ID="347">徐汇区</City>
<City ID="348">杨浦区</City>
<City ID="349">闸北区</City>
</Province>
<Province ID="26" Name="四川">
<City ID="350">阿坝藏族羌族自治州</City>
<City ID="351">巴中市</City>
<City ID="352">成都市</City>
<City ID="353">六盘水市</City>
<City ID="354">德阳市</City>
<City ID="355">甘孜藏族自治州</City>
<City ID="356">广安市</City>
<City ID="357">广元市</City>
<City ID="358">乐山市</City>
<City ID="359">凉山彝族自治州</City>
<City ID="360">泸州市</City>
<City ID="361">眉山市</City>
<City ID="362">绵阳市</City>
<City ID="363">内江市</City>
<City ID="364">南充市</City>
<City ID="365">攀枝花市</City>
<City ID="366">遂宁市</City>
<City ID="367">雅安市</City>
<City ID="368">宜宾市</City>
<City ID="369">资阳市</City>
<City ID="370">自贡市</City>
</Province>
<Province ID="27" Name="天津">
<City ID="371">和平区</City>
<City ID="372">河东区</City>
<City ID="373">河西区</City>
<City ID="374">南开区</City>
<City ID="375">河北区</City>
<City ID="376">红桥区</City>
<City ID="377">塘沽区</City>
<City ID="378">汉沽区</City>
<City ID="379">大港区</City>
<City ID="380">东丽区</City>
<City ID="381">西青区</City>
<City ID="382">津南区</City>
<City ID="383">北辰区</City>
<City ID="384">武清区</City>
<City ID="385">宝坻区</City>
<City ID="386">宁河县</City>
<City ID="387">静海县</City>
<City ID="388">蓟县</City>
</Province>
<Province ID="28" Name="西藏">
<City ID="389">阿里地区</City>
<City ID="390">昌都地区</City>
<City ID="391">拉萨市</City>
<City ID="392">商洛市</City>
<City ID="393">那曲地区</City>
<City ID="394">日喀则地区</City>
<City ID="395">山南地区</City>
</Province>
<Province ID="29" Name="新疆">
<City ID="396">阿克苏地区</City>
<City ID="397">阿勒泰地区</City>
<City ID="398">巴音郭楞州</City>
<City ID="399">观塘区</City>
<City ID="400">昌吉州</City>
<City ID="401">哈密地区</City>
<City ID="402">和田地区</City>
<City ID="403">喀什地区</City>
<City ID="404">克拉玛依市</City>
<City ID="405">克孜勒苏州</City>
<City ID="406">塔城地区</City>
<City ID="407">吐鲁番地区</City>
<City ID="408">乌鲁木齐市</City>
<City ID="409">伊犁州</City>
</Province>
<Province ID="30" Name="云南">
<City ID="410">保山市</City>
<City ID="411">楚雄彝族自治州</City>
<City ID="412">大理白族自治州</City>
<City ID="413">德宏傣族景颇族自治州</City>
<City ID="414">迪庆藏族自治州</City>
<City ID="415">红河哈尼族彝族自治州</City>
<City ID="416">昆明市</City>
<City ID="417">丽江市</City>
<City ID="418">临沧市</City>
<City ID="419">怒江傈傈族自治州</City>
<City ID="420">曲靖市</City>
<City ID="421">思茅市</City>
<City ID="422">文山壮族苗族自治州</City>
<City ID="423">西双版纳傣族自治州</City>
<City ID="424">玉溪市</City>
<City ID="425">昭通市</City>
</Province>
<Province ID="31" Name="浙江">
<City ID="426">杭州市</City>
<City ID="427">湖州市</City>
<City ID="428">嘉兴市</City>
<City ID="429">金华市</City>
<City ID="430">丽水市</City>
<City ID="431">宁波市</City>
<City ID="432">衢州市</City>
<City ID="433">绍兴市</City>
<City ID="434">台州市</City>
<City ID="435">温州市</City>
<City ID="436">舟山市</City>
</Province>
<Province ID="32" Name="台湾">
<City ID="437">台湾</City>
</Province>
<Province ID="33" Name="香港">
<City ID="438">香港</City>
</Province>
<Province ID="34" Name="澳门">
<City ID="439">澳门</City>
</Province>
</Root>

Common.js
复制代码 代码如下:

//省份,城市
var provinceDom = null;
function InItDom(fname) {
var tempdom;
try {
tempdom = new ActiveXObject("Microsoft.XMLDOM");
} catch (e) {
try {
tempdom = document.implementation.createDocument("", "", null);
}
catch (e) {
alert(e.message);
}
}
try {
tempdom.async = false;
tempdom.load(fname);
//alert(tempdom.childNodes.length);
}
catch (e) {
}
return tempdom;
}
function InitProvince(provinceid) {
var province = document.getElementById(provinceid);
province.length = 0;
if (provinceDom == null)
provinceDom = InItDom("../config/Provinces.xml");
if (provinceDom != null) {
var proNodes = provinceDom.childNodes[1].childNodes;
//alert(proNodes.length);
for (var i = 0; i < proNodes.length; i++) {
var tempOption = document.createElement("option");
tempOption.value = proNodes[i].getAttribute("Name");
tempOption.text = proNodes[i].getAttribute("Name");
province.options.add(tempOption);
}
//alert(proNodes[1].getAttribute("Name"));
}
}
function ResetCity(province, cityname) {
var pname=province.value;
var city = document.getElementById(cityname);
city.length = 0;
if (provinceDom == null)
provinceDom = InItDom("../config/Provinces.xml");
if (provinceDom != null) {
// alert(provinceDom.childNodes[1].childNodes.length);
var root = provinceDom.selectNodes("Root")[0];
//Nodes = objXMLDoc.selectNodes("test/test1/test1");
// alert(root.childNodes.length);
for (var i = 0; i < root.childNodes.length; i++) {
if (root.childNodes[i].getAttribute("Name") == pname) {
for (var j = 0; j < root.childNodes[i].childNodes.length; j++) {
var tempOption = document.createElement("option");
tempOption.value = root.childNodes[i].childNodes[j].text;
tempOption.text = root.childNodes[i].childNodes[j].text;
city.options.add(tempOption);
}
break;
}
}
}
}

aspx页面:
复制代码 代码如下:

<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td height="25" width="30%" align="right">
UName :
</td>
<td height="25" width="*" align="left">
<asp:TextBox ID="txtUName" runat="server" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td height="25" width="30%" align="right">
UCountry :
</td>
<td height="25" width="*" align="left">
<asp:TextBox ID="txtUCountry" runat="server" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td height="25" width="30%" align="right">
UProvince :
</td>
<td height="25" width="*" align="left">
<asp:DropDownList ID="ddlUProvince" runat="server" onchange="ResetCity(this,'ddlUCity');">
</asp:DropDownList>
</td>
</tr>
<tr>
<td height="25" width="30%" align="right">
UCity :
</td>
<td height="25" width="*" align="left">
<asp:DropDownList ID="ddlUCity" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td height="25" colspan="2">
<div align="center">
<asp:Button ID="btnAdd" runat="server" Text="注册" OnClick="btnAdd_Click"></asp:Button>
</div>
</td>
</tr>
</table>
<script>InitProvince('ddlUProvince');</script>

aspx.cs:
复制代码 代码如下:

string province=Request["ddlUProvince"];
string city=Request["ddlUCity"];