制作四大菜系下拉列表，每个菜系对应三个菜名并显示菜品图片
插入标签（以“hello Word”为例）
1）bt1.innerHTML=" hello world 你好 "
2）var x="hello world"
bt1.innerHTML=""+x+""
3）bt1.innerHTML=<option>${x}</option><option>Nihao</option>
第一步菜系的静态内容
第二步菜名的静态内容
第三步:当省份进行变换时，对应市也发生变化
//改变事件： onchange
</select>
<select id="bt2">
</select>
<img src="" alt="" id="bt3" width="500" height="500">
<script>
var imgArr=[["images/01.jpg","images/02.jpg","images/03.jpg"],["images/04.jpg","images/05.jpg","images/06.jpg"],["images/07.jpg","images/08.jpg","images/09.jpg"],["images/10.jpg","images/11.jpg","images/12.jpg"]];
var cuisine=["鲁菜","川菜","粤菜","苏菜"]
var bt1=document.getElementById("bt1")
var img=document.getElementById("bt3");
var str=""
img.src=imgArr[0][0];
for(var n=0;n<cuisine.length;n++){
str=str+`<option>${cuisine[n]}</option>`
}
bt1.innerHTML=str
var DN=[["清汤银耳","醋椒鱼","木须肉"],["鱼香肉丝","宫保鸡丁","麻婆豆腐"],["白切鸡","烧鹅","烤乳猪"],["扬州炒饭","狮子头","文思豆腐"]]
var str1=""
for(var n=0;n<DN[0].length;n++){
str1=str1+`<option>${DN[0][n]}</option>`
}
var bt2=document.getElementById("bt2")
bt2.innerHTML=str1
bt1.onchange=function(){
var index=bt1.selectedIndex
console.log(index)
var str1=""
for(var n=0;n<DN[index].length;n++){
str1=str1+`<option>${DN[index][n]}</option>`
}
bt2.innerHTML=str1
img.src=imgArr[index][0];
}
bt2.onchange=function(){
var index=bt1.selectedIndex;
var index1=bt2.selectedIndex;
console.log(index1)
img.src=imgArr[index][index1];
}
</script>
