功能描述：做一个下拉菜单，点击下拉菜单中的每一个子项切换到该菜单对应的内容。
分析：使用select标签完成下拉菜单的样式，然后写各个option选项的内容。第一次使用click点击事件绑定方式，没有实现切换功能。查阅资料得知select标签没有click事件，但是有change和onchange事件。
-
change()：当元素的值发生改变时会发生change事件（仅用于表单字段），change()是jquery方法，不能在html标签中使用。
当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
语法：$(selector).change() ：触发被选元素的change事件。 -
onchange()：onchange()是js方法，在标签元素上使用。事件会在域的内容改变时发生。也可以用于单选框和复选框改变后触发的事件。所有主要浏览器都支持。
支持onchange事件的标签：<input>, <select>, 和 <textarea>
例如：<input type="text" onchange="myFunction()"> -
下拉菜单及option选项触发实现
1.下拉框实现代码
<div class="dropList">
<select class="selectType" autocomplete="off" onchange="checkSelect();">
<option value="1" selected="selected">菜单1</option>
<option value="2">菜单2</option>
<option value="3">菜单3</option>
</select>
</div>
onchange="checkSelect();：select标签中定义onchange方法。
autocomplete=“off”：关闭自动完成功能。
selected=“selected”：设置默认选中。这里默认显示菜单1.
效果如下：
2.option各个选项内容
<div class="tableAll">
<table class="table1">
<tr>
<td rowspan="8">菜单1</td>
<td rowspan="2">xx</td>
<td>02</td>
<td>110-131/1100-230</td>
</tr>
<tr>
<td>03</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td rowspan="3">xxx</td>
<td>02</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>99</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>24</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>vvv</td>
<td>02</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td rowspan="2">nnn</td>
<td>02</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>03</td>
<td>100-121/1000-250</td>
</tr>
</table>
<table class="table1 active">
<tr>
<td rowspan="7">菜单2</td>
<td rowspan="2">rrr</td>
<td>03</td>
<td>110-131/1100-230</td>
</tr>
<tr>
<td>99</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td rowspan="2">vvv</td>
<td>02</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>24</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>nnn</td>
<td>01</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td rowspan="2">ggg</td>
<td>02</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>03</td>
<td>100-121/1000-250</td>
</tr>
</table>
<table class="table1 active">
<tr>
<td rowspan="8">菜单3</td>
<td rowspan="2">rrr</td>
<td>03</td>
<td>110-131/1100-230</td>
</tr>
<tr>
<td>99</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td rowspan="2">vvv</td>
<td>02</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>24</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td rowspan="2">nnn</td>
<td>01</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>03</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td rowspan="2">ggg</td>
<td>02</td>
<td>100-121/1000-250</td>
</tr>
<tr>
<td>03</td>
<td>100-121/1000-250</td>
</tr>
</table>
</div>
默认显示菜单1的标签，菜单2和菜单3隐藏。这里通过active样式实现。
效果：
3.option选项触发事件实现
<script>
function checkSelect(){
//获取select选中的text。
var val=$(".dropList .selectType option:selected").text();
//获取select选中的索引，index为索引值。
var index = $(".selectType").get(0).selectedIndex;
//操作函数
<!--$(this).removeClass('active');-->
$('.table1')
.eq(index)
.removeClass('active')
.siblings()
.addClass('active');
}
</script>
【注意】此处方法用索引，所以菜单顺序应该和下面table表顺序一致，否则显不是正确的表格。如果使用id查找，给每个table设置不同的id，这种情况下table表的顺序可以使任意的，不用跟菜单保持一致。
-
select选项常用方法：
1.获取select选中的text
$(".dropList .selectType option:selected").text()；
$(".dropList .selectType").find(“option:selected”).text();
2.获取select选中的索引
$(".selectType").get(0).selectedIndex；（此处也可以用id）
3.获取select选中的 value
$(".selectType").val();
4.得到select项的个数
$(".selectType").get(0).options.length
【注意】div下面的table标签的class名不要和其他div的table标签的class同名，否则会相互影响。选项触发功能不能实现。
点击菜单2效果：
点击菜单3效果：
三个菜单均可以自由切换，下面对应的表格也会自由切换。
4.整体样式代码
.active{
display:none;
}
table{
border:1px solid #666666;
text-align: center;
font-size: 14px;
border-collapse: collapse;
cursor: pointer;
}
table td{
border:1px solid #666666;
padding: 8px;
width: 110px;
height: 25px;
}
.selectType{
font-size:13px;
width: 270px;
height: 25px;
}
.dropList{
padding-top: 10px;
}
.ziduan-table{
padding-top:8px;}
叉叉：每日进步一点点。