javascript - 请问在html中如何点击某元素.而展开一个select

Question

如图所示.现在点击每个单元左侧部分会展开selec.而点击右侧蓝色区域是无任何效果的.

dom结构大概如此

<p class="item">
    <select name="" id="x">
    <option value="">----</option>
    <option value="1">12</option>
    </select>
    <label for="x"><i>日</i></label>
</p>

label配合input可以做到点击label的时候.相对应的input会获得焦点.

但label跟select配合似乎是无效的.

现使用zepto做移动开发.
如何在点击/触击<i>标签的时候.让对应的select展开呢?

或者是我实现方式有问题?css3是否直可以直接实现此效果?

Answer 1

select和input的file标签可以说是html最不人性化的标签了，推荐你不要使用原生的select标签，推荐你个http://silviomoreto.github.io/bootstrap-select/，看了你的问题，我第一反应是trigger：

$('i').click(function(){//没仔细专研过过zepto，但jquery和zepto差不多，你用可用zepto触摸事件代替'click'
    $(this).parents('label').prev('select').trigger('click');
})

结果成功的失败了。
然后我尝试了

$('i').click(function(){
        $(this).parents('label').prev('select').click();
    })

结果又成功的失败了
然后我尝试改变了它的size：

$('i').click(function(){
            $(this).parents('label').prev('select').attr('size',2);
        })

效果能实现了

但是样式很丑，你也可以看看老外的http://jsfiddle.net/g3Ta3/4/
其实，我们也可以把下拉里的option的值wrap在一个p里，然后找出当前的select的offset.left和offset.top,然后append到select的后面，这只是一个模拟select的思路而已。这样做的好处可以自定义select的样式
下面给出正确的答案，修改一下扣来的老外的答案：

$(document).ready(function() {
    $('i').click(function() {
        open($(this).parents('label').prev('select'));
    });
});
function open(elem) {
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem[0].dispatchEvent(e);
    } else if (element.fireEvent) {
        elem[0].fireEvent("onmousedown");
    }
}

Answer 2

移动端只考虑webkit的话可以尝试纯样式解决。（没测兼容）
参考 chrome://resources/css/widgets.css 里的select样式 ,
-webkit-appearance: none;
后就可以定制select的style了
具体效果可以看 Chrome设置界面 - 清除浏览数据