最近收到一份需求，需求中有一个小功能点类似有好多种水果，选择其中一个水果就在其下方位置显示这个水果的说明。
需求要求所有水果都是单选，但这个页面主要是在手机上显示的，那水果一多岂不是滑到底都要滑半天？于是我寻思着把单选水果改成下拉选项，这样水果再多也就占页面一点点位置。
说干就干，先写个html：
<div id="option">
<label for="fruit">水果：</label>
<select name="fruit" id="fruit">
<option selected="selected">请选择</option>
<option value="苹果">苹果</option>
<option value="橘子">橘子</option>
<option value="梨子">梨子</option>
<option value="西瓜">西瓜</option>
<option value="哈密瓜">哈密瓜</option>
</select>
</div>
<ul id="detail">
<li>一天一苹果，医生远离我</li>
<li>橘子皮可以煮汤</li>
<li>冰糖雪梨好好吃</li>
<li>西瓜是我的最爱</li>
<li>日本哈密瓜好好吃</li>
</ul>
然后让下面detail的值先隐藏。
#detail li{
display: none;
}
这个时候页面样子是这样的：
接下来就要开始写js了，js这块我比较弱，我的想法呢就是先拿到前面那个select下面option的index，然后根据index的值显示对应的li。
但是怎么拿到呢？我本来想找找有没有JQuery的方法可以获取到option的index的，但是翻查了半天的资料和别人的解决方案，不是看不懂就是设置了不生效...正在我灰心的时候，我在菜鸟教程上看到了解决方案，原来一句话就可以了：
var x=document.getElementById("mySelect").selectedIndex;
那么怎么在每次下拉的时候都输出对应的index呢，这里我们就要设置一个onchange事件了。当下拉框发现变化的时候，输出对应的index，然后再将index关联到后面的li上面，就可以做到选中一个水果，显示对应的说明啦：
fruit.onchange = function () {
var ind =document.getElementById("fruit").selectedIndex;
if(ind == 0){
$('#detail li').hide();
}else{
$('#detail li').eq(ind-1).show().siblings().hide();
}
}
最后的效果图就是下面这样：
