最近收到一份需求,需求中有一个小功能点类似有好多种水果,选择其中一个水果就在其下方位置显示这个水果的说明。
需求要求所有水果都是单选,但这个页面主要是在手机上显示的,那水果一多岂不是滑到底都要滑半天?于是我寻思着把单选水果改成下拉选项,这样水果再多也就占页面一点点位置。
说干就干,先写个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();
}
}
最后的效果图就是下面这样: