通过创建元素从而实现两个下拉框的联动效果

时间：2021-05-09 23:06:38
 
 
 
  通过创建元素从而实现两个下拉框的联动效果通过创建元素从而实现两个下拉框的联动效果
 
   
<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>
 
 
  
 
  View Code 
 
 
 
<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>
 

 

 


标签：
相关文章