js03-DOM编程-省市联动初级

DOM编程案例：省市联动

function selectCity(value) {    
var  shi = document.getElementById("shi");

//需要清空之前的，不然之前的也会出现在这一次的“市”中  
//shi.length = 1;//第一种方式清空    
shi.innerHTML = "<option>请选择</option>"//第二种方式清空    

if(value==1){       
var opt1 = new Option("大连",11); 

/*但是直接new option有时候浏览器版本太低时会不出现，        
因此这个时候需要op1.innerHTML = "大连"；        或者        
var opt1 = document.createElement("option");        
opt1.innerHTML = "西安";//或者创建文本子节点加到option中        
opt1.value = "31";        shi.appendChild(opt1);      
* */        

var opt2 = new Option("沈阳",11);       
var opt3 = new Option("葫芦岛",11);       
 shi.appendChild(opt1);        
 shi.appendChild(opt2);        
 shi.appendChild(opt3);    
}else if(value==2){        
var opt1 = new Option("济宁",11);       
var opt2 = new Option("济南",11);       
var opt3 = new Option("菏泽",11);        
shi.appendChild(opt1);        
shi.appendChild(opt2);       
 shi.appendChild(opt3);   
}else if(value == 3) {       
var opt1 = document.createElement("option"); 
 opt1.innerHTML = "西安";       
 opt1.value = "31";        
 shi.appendChild(opt1);    
}}

注意：

1：清空

shi.length = 1 ;//第一种方式清空
shi.innerHTML = “请选择” //第二种方式清空

2：版本过低的option问题：

这个时候需要op1.innerHTML = “大连”；

或者
var opt1 = document.createElement(“option”);
opt1.innerHTML = “西安”;//或者创建文本子节点加到option中
opt1.value = “31”; shi.appendChild(opt1);

3：op1.innerHTML = “大连”； 可以换为其他写法；创建文本子节点加到option中

因此为了一些版本低的浏览器的着想，所以尽量使用create，而尽量不要使用new

4、this表示当前的对象