Js manipulates the dom to generate drop down list boxes

  • 2020-03-30 02:06:27
  • OfStack

 
<!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> using dom Generate the drop-down list box </title> 

</head> 

<body onload="setFun()"> 
<form> 
<select name="area" id="area"> 
<option value="0"> No region </option> 
</select> 
</form> 
<script language="javascript"> 
function setFun(){ 
var id = new Array(1,2,3); 
var value = new Array(" guizhou "," chongqing "," sichuan "); 
var select = document.getElementById("area"); 
select.length = 1;//Settings can only select one
select.options[0].selected = true;//Set the default to select the first one
for(var x = 0;x<id.length;x++){ 
var option = document.createElement("option"); 
option.setAttribute("value",id[x]);//Sets the value of the option property
option.appendChild(document.createTextNode(value[x])); 
select.appendChild(option);//Add options to select
} 
} 
</script> 
</body> 
</html> 

Related articles: