微信内置浏览器中，点击下拉框出现页面乱跳转现象（iphone）

微信内置浏览器中，点击下拉框出现页面乱跳转现象（iphone）

前言:

这是小菜博客的第三篇文章。一直认为自己可以表达的东西太过简单，难以上台面，总是吝啬地不肯写。就算是写，也不知道从何开始。在同事的鼓励下，终于跨出了第一步。初期阶段，写文章不一定是非要给他人看，当作自己的学习笔记也是一个不错的选择。另外，在这几次的写作中发现，写技术博客本身也是需要一定的表达能力。好了，废话不多说，开始讲讲在项目中碰到的实际问题吧。

情景再现:

正当开心地收拾东西准备下班的时候，测试部的姑娘跑过来提了一个bug: “在iphone5下，点击输入框或下拉框时，底部菜单无法固定，出现页面乱跳转现象，而安卓机并没有这个问题。”由于项目比较急，小菜只能乖乖留下解决问题。再次测试之后，小菜逐一排查了可能性原因(正式版和测试版代码不一致，页面HTML代码错乱，css代码错误)，但都未能解决问题。一个简单的select，怎么就出现问题了呢?百思不得其解。（至今也没有找到问题根源）

找不出问题根源，只能先看看有没有解决方案。经过多次调试，捕获select动作，找到了一个解决方案。原理很简单：利用div来模拟select。

解决方案:

思路也是比较清晰的。页面中有两个html结构，一是select代码照常写（一开始处于隐藏状态display:none），二是被模拟的div(一开始处于显示状态)。当点击div时：

1. 出现select下拉框
2. 隐藏底部菜单
3. 将读取的option值给被模拟的div，其模拟核心代码可下载VisualSelect.js
4. 赋值之后，恢复开始状态，显示底部菜单

以下是代码：

【html代码】

<div class=”visualSelect” >商行</div>
<select class=”round” style=”display:none;”>
    <option value=”1”>国股</option>
    <option value=”2”>商行</option>
    <option value=”3”>其他</option>
</select>

【css代码】

.round { border-radius: 4px;}
.visualSelect {
    width: 100%;
    padding: .45rem .5rem .25rem .75rem;
    margin-bottom: .875rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #bbb;
}

【js代码】

注：由于该问题只存在于小屏幕iphone，android手机并没有问题，因此最好判断机型。这里对iphone机型作了统一判断，并未详细区分。要是有兴趣的，可以自行详细判别。

var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {
    $(“select”).VisualSelect();    //调用插件即可
}