select标签小练习
html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: black 1px solid;
}
</style>
</head>
<body>
<select name="手机选择" id="s1">
<option value="华为">华为</option>
<option value="小米">小米</option>
<option value="魅族">魅族</option>
</select>
<br>
<br>
<div class="box" id="b1">
<p id="p1"></p>
</div>
</body>
<script>
var p1 = document.getElementById("p1")
var s1 = document.getElementById("s1")
s1.onchange = function () {
var index = this.selectedIndex
phone = this.options[index].value
if(phone == "华为"){
p1.innerText = "华为手机隶属于华为消费者业务，作为华为三大核心业务之一，印度及美国等地设立了16个研发中心"
}else if(phone == "小米"){
p1.innerText = "小米公司2010年4月成立，是一家专注于高端智能手机自主研发的移动互联网公司，"
}else {
p1.innerText = "魅族科技有限公司是一家知名手机厂商。魅族M8是第一部国产智能手机，被微软总部珍藏在展厅"
}
}
</script>
</html>
JavaScript 部分详细说明
<script>
var p1 = document.getElementById("p1")
var s1 = document.getElementById("s1")
s1.onchange = function () {
var index = this.selectedIndex
phone = this.options[index].value
if(phone == "华为"){
p1.innerText = "华为手机隶属于华为消费者业务，作为华为三大核心业务之一，印度及美国等地设立了16个研发中心"
}else if(phone == "小米"){
p1.innerText = "小米公司2010年4月成立，是一家专注于高端智能手机自主研发的移动互联网公司，"
}else {
p1.innerText = "魅族科技有限公司是一家知名手机厂商。魅族M8是第一部国产智能手机，被微软总部珍藏在展厅"
}
}
</script>
var p1 = document.getElementById("p1")
把 html 文档中 id 值为 ‘p1’ 的标签赋值给 js 中 'p1' 变量
var 是声明变量的关键字
p1 是变量名
document.getElementById("p1") 的意思是从 体内查找 id 值为 ‘p1’ 的标签
var s1 = document.getElementById("s1")
把 html 文档中 id 值为 ‘s1’ 的标签赋值给 js 中 's1' 变量
var 是声明变量的关键字
s1是变量名
document.getElementById("s1") 的意思是从 体内查找 id 值为 ‘s1’ 的标签
s1.onchange = function () {}
s1 前面已经赋值过了，表示 html 文档中的 标签内容发生改变（你选择了不同的 option）时，会触发（执行）后面的 function () {} 函数
var index = this.selectedIndex
index 表示获取当前
