<HTML>
<SELECT ID = "Province">
<Option value = "-. 1"> select </ Option>
</ SELECT>
<SELECT ID = "City"> </ SELECT>
<SELECT ID = "Country"> </ the SELECT>
<Script>
var provinceArr = [ 'Shanghai', 'Jiangsu Province', 'Hebei', 'Hunan'];
var cityArr = [
[ 'Shanghai'],
[ 'Suzhou', 'Nanjing' 'Yangzhou'],
[ 'Shijiazhuang', 'Qinhuangdao', 'Changgiakou'],
[ 'Changsha', 'Yueyang', 'Zhuzhou']
];
var countryArr = [
[
[ 'Huangpu area', ' Jing area ',' Changning ',' Pudong ']
],
[
[' Huqiu ',' Wu area ',' city phase ',' Suzhou area ',' region Wujiang '],
['Xuanwu ',' Qinhuai area ',' Jianye ',' Drum area ',' pukou '],
[' Hanjiang ',' Guangling ',' region jiangdu ']
],
[
[' Chang'an ', 'west region', 'Xinhua area', 'region jingxing'],
[ 'harbor area', 'region Shanhaiguan', 'Beidaihe area', 'region funing'],
[ 'region east', 'west region' 'Xuanhua area', 'region Xiahuayuan']
],
[
[ 'Yuelu', 'Yuhua area', 'Kaifu area', 'Hibiscus region'],
[ 'Yueyanglou area', 'Eagle mountain', 'Yunxi', 'Lake District'],
[ 'Tianyuan area ',' Hetang ',' Husong area ',' Shifeng ']
]
];
function createOption (obj, Data) {
for (var Data in I) {
var = new new Option-OP (Data [I], I);
obj.options.add (OP);
}
}
var Province = document.getElementById ( 'Province');
createOption (Province, provinceArr);
var = document.getElementById City ( 'City');
province.onchange function = () {
city.options.legth = 0;
createOption (City, cityArr [province.value]);
};
var Country = document.getElementById ( 'Country');
city.onchange = function () {
country.options.length = 0;
createOption(country,countryArr[province.value][city.value]);
};
province.onchange=function(){
city.options.length=0;
createOption(city,cityArr[province.value]);
if(province.value>=0){
city.onchange();
}else {
country.options.length=0;
}
};
</script>
</html>
2, array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
div{ width:100px; height: 100px; border:1px solid;}
</style>
<div></div>
<p> <button id="btn">change</button> </p>
<script>
var btn = document.getElementById('btn');
var div = document.getElementsByTagName('div')[0];
btn.onclick = function () {
div.style.border = 'double red';
}
</script>
</body>
</html>
3, button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
div{ width:100px; height: 100px; border:1px solid;}
</style>
<div></div>
<p> <button id="btn">change</button> </p>
<script>
var btn = document.getElementById('btn');
var div = document.getElementsByTagName('div')[0];
btn.onclick = function () {
div.style.border = 'double red';
}
</script>
</body>
</html>
study well