jquery+ajax实现多个下拉选之间的关联

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
       <option value="吉林省">吉林省</option>
       <option value="辽宁省">辽宁省</option>
       <option value="山东省">山东省</option>
     </select>
     <select id="city" name="city">
        <option value="">请选择.....</option>
     </select>

  </body> 
     <script language="JavaScript"> $().ready(function(){ $("#province").change(function(){ //清空city $("#city option:not(:first)").remove(); //根据province设置city var prov = $(this).val(); $.post("cities.xml",function(data){ var $xmlProv = $(data).find("province[name="+prov+"]"); var $cities = $xmlProv.find("city"); $cities.each(function(i,city){ var $opt = $("<option></option>"); $opt.text($(city).text()); $opt.appendTo($("#city")); }); },"xml"); }); }) </script>

</html>
<?xml version="1.0" encoding="GB2312"?>
<china>
    <province name="吉林省">
        <city>长春</city>
        <city>吉林市</city>
        <city>四平</city>
        <city>松原</city>
        <city>通化</city>
    </province>
    <province name="辽宁省">
        <city>沈阳</city>
        <city>大连</city>
        <city>鞍山</city>
        <city>抚顺</city>
        <city>铁岭</city>
    </province>
    <province name="山东省">
        <city>济南</city>
        <city>青岛</city>
        <city>威海</city>
        <city>烟台</city>
        <city>潍坊</city>
    </province>
</china>    

你可能感兴趣的:(jquery,Ajax)