通过创建元素从而实现两个下拉框的联动效果
<html> <head> <meta charset="utf-8"> <title>javascript</title> </head> <body> <h1 style="margin-left:33%">JAVASCRIPT</h1> <form method="post" > <table border="1" cellspacing="0" cellpadding="5px" width="600px" style="margin-left:33%"> <tr> <td align="center" width="200px">籍贯</td> <td align="center" width="200px"><select id="pro" onchange="createCity(this)"><option>--请选择--</option></select></td> <td align="center" width="200px"><select id="city"><option>--请选择--</option></select></td></tr> </table> </form> <script language="javascript"> //创建一个省份数组[] var provinces=[]; //数组里的每个值都是对象{} provinces[0]={pid:'上海',pname:'上海',city:[{cid:'黄埔',cname:'黄埔'},{cid:'静安',cname:'静安'},{cid:'徐汇',cname:'徐汇'}]}; provinces[1]={pid:'江苏',pname:'江苏',city:[{cid:'南京',cname:'南京'},{cid:'连云港',cname:'连云港'},{cid:'苏州',cname:'苏州'}]}; provinces[2]={pid:'安徽',pname:'安徽',city:[{cid:'合肥',cname:'合肥'},{cid:'安庆',cname:'安庆'},{cid:'黄山',cname:'黄山'}]}; //创建自动生成的省份 function createProvince(){ var pro=document.getElementById("pro"); pro.options.length=0;//默认显示第一行 for(var i=0;i<provinces.length;i++){ var opt=document.createElement("option"); //innerText或text是在页面中显示的值 opt.innerText=provinces[i].pid; //value是传给服务器的值 opt.value=provinces[i].pname; //可以是pro.add(opt) 也可以是pro.options.add(opt) pro.options.add(opt); } } //创建根据省份名称从而动态创建城市名称 function createCity(obj){ var city=document.getElementById("city"); city.options.length=0;//默认显示第一行 //city.options.length=1; for(var i=0;i<provinces.length;i++){ if(obj.value==provinces[i].pname){ var citys=provinces[i].city; //alert(obj.value+"##"); //alert(citys.length+"___"+citys); for(var j=0;j<citys.length;j++){ var opt=document.createElement("option"); opt.innerText=citys[j].cid; opt.value=citys[j].cname; city.options.add(opt); } } } } //默认第一行为请选择 //createProvince(); //默认显示第一行 createProvince(); createCity(document.getElementById("pro")); </script> </body> </html>
<html> <head> <meta charset="utf-8"> <title>javascript</title> </head> <body> <h1 style="margin-left:33%">JAVASCRIPT</h1> <form method="post" > <table border="1" cellspacing="0" cellpadding="5px" width="600px" style="margin-left:33%"> <tr> <td align="center" width="200px">籍贯</td> <td align="center" width="200px"><select id="pro" onchange="createCity(this)"><option>--请选择--</option></select></td> <td align="center" width="200px"><select id="city"><option>--请选择--</option></select></td></tr> </table> </form> <script language="javascript"> //创建一个省份数组[] var provinces=[]; //数组里的每个值都是对象{} provinces[0]={pid:'上海',pname:'上海',city:[{cid:'黄埔',cname:'黄埔'},{cid:'静安',cname:'静安'},{cid:'徐汇',cname:'徐汇'}]}; provinces[1]={pid:'江苏',pname:'江苏',city:[{cid:'南京',cname:'南京'},{cid:'连云港',cname:'连云港'},{cid:'苏州',cname:'苏州'}]}; provinces[2]={pid:'安徽',pname:'安徽',city:[{cid:'合肥',cname:'合肥'},{cid:'安庆',cname:'安庆'},{cid:'黄山',cname:'黄山'}]}; //创建自动生成的省份 function createProvince(){ var pro=document.getElementById("pro"); pro.options.length=0;//默认显示第一行 for(var i=0;i<provinces.length;i++){ var opt=document.createElement("option");
//innerText或text是在页面中显示的值 opt.innerText=provinces[i].pid;
//value是传给服务器的值 opt.value=provinces[i].pname;
//可以是pro.add(opt) 也可以是pro.options.add(opt) pro.options.add(opt); } } //创建根据省份名称从而动态创建城市名称 function createCity(obj){ var city=document.getElementById("city"); city.options.length=0;//默认显示第一行 //city.options.length=1; for(var i=0;i<provinces.length;i++){ if(obj.value==provinces[i].pname){ var citys=provinces[i].city; //alert(obj.value+"##"); //alert(citys.length+"___"+citys); for(var j=0;j<citys.length;j++){ var opt=document.createElement("option"); opt.innerText=citys[j].cid; opt.value=citys[j].cname; city.options.add(opt); } } } } //默认第一行为请选择 //createProvince(); //默认显示第一行 createProvince(); createCity(document.getElementById("pro"));
/**
说明
options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：允许通过 Select 对象来改变显示的选项：
- 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
- 如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
- 如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
- 可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。
*/ </script> </body> </html>
