省市二级联动代码

最新推荐文章于 2022-11-16 15:27:06 发布

找到快乐的根源

最新推荐文章于 2022-11-16 15:27:06 发布

阅读量3.3w

点赞数

分类专栏： ajax+jquery+js系列文章标签： list function xhtml javascript menu html

本文链接：https://blog.csdn.net/k8080880/article/details/5981034

版权

ajax+jquery+js系列专栏收录该内容

110 篇文章 0 订阅

订阅专栏

<!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-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<SCRIPT type="text/javascript">
function refresh_screen()
{
window.location.reload()
}

function Link(name, value)
{
this.name = name;
this.value = value;
this.title = new Array();
this.url = new Array();
}

var names      = new Array ();
var temp       = new Array ();
var back       = new Array ();
var link       = new Link ();
var final_list = new Array ();

var menu = new Array (

"所有省市|*|所有地区",

"上海|上海*|所有地区#"+
"上海|上海",

"北京|北京*|所有地区#"+
"北京|北京",

"天津|天津*|所有地区#"+
"天津|天津",

"重庆|重庆*|所有地区#"+
"重庆|重庆",

"海南|海南*|所有地区#"+
"海口|海口#"+
"三亚|三亚#"+
"儋州|儋州",

"宁夏|宁夏*|所有地区#"+
"银川|银川#"+
"固原|固原#"+
"吴忠|吴忠#"+
"石嘴山|石嘴山",

"台湾|台湾*|所有地区#"+
"台湾|台湾",

"香港|香港*|所有地区#"+
"香港|香港",

"澳门|澳门*|所有地区#"+
"澳门|澳门",

"其他|其他*|所有地区#"+
"其他|其他"

);

function updateMenus ( ) {
   var n = document.pic.province.selectedIndex;
   document.pic.city.length = final_list[n].title.length;
   for (var x = 0; x < document.pic.city.length; x++)
   {
      document.pic.city.options[x].text = final_list[n].title[x];
      document.pic.city.options[x].value = final_list[n].url[x];
   }
document.pic.city.selectedIndex = 0;
}

//要求表单的名称必须是pic，这一点一定要注意
//填充省和地区组合框
function give_names (selprovince,selcity)
{
document.pic.province.length = names.length;
for ( var i=0; i<names.length; i++ )//填充省选择框
   {
      document.pic.province.options[i].text = final_list[i].name;
      document.pic.province.options[i].value = final_list[i].value;
    }

document.pic.province.selectedIndex = 0;//找出选择的省
for ( var i=0; i<document.pic.province.length; i++ )
    {
     if (document.pic.province.options[i].value==selprovince)
       {
        document.pic.province.selectedIndex = i;
        break;
       }
    }

k=document.pic.province.selectedIndex;
document.pic.city.length = final_list[k].title.length;
for (var x=0; x<document.pic.city.length; x++)//填充地区选择框
{
document.pic.city.options[x].text = final_list[k].title[x];
document.pic.city.options[x].value = final_list[k].url[x];
}

document.pic.city.selectedIndex = 0;//找出选择的地区
for ( var i=0; i<document.pic.city.length; i++ )
    {
     if (document.pic.city.options[i].value==selcity)
       {
        document.pic.city.selectedIndex = i;
        break;
       }
    }
}

//创建省和地区组合框
function createMenus (selprovince,selcity)
{
for ( var i=0; i < menu.length; i++ )
{
names[i] = menu[i].split("*");
link = new Link(names[i][0].split("|")[0],names[i][0].split("|")[1]);
temp[i] = names[i][1].split("#");
final_list[i] = link;
for (var x=0; x<temp[i].length; x++)
{
   back[x] = temp[i][x].split("|");
   final_list[i].url[x] = back[x][0];
   final_list[i].title[x] = back[x][1];
}
}
give_names(selprovince,selcity);
}

</SCRIPT>

<body>
<form name="pic">

<select name="province" onChange="updateMenus()">
          <option selected>所有省市</option>
        </select> <select name="city">
          <option selected>所有地区</option>
        </select>
        <script language="JavaScript">
          createMenus('','');//第1个参数是省，第2个参数是市。也是可以预设为某个省市的
      </script>
        </font>

</form>
</body>
</html>