select旁边有个图片，点击图片如何触select？？？

Question

有没有遇到过同样的问题

Answer 1

input 外面包一层父极，图片作为背景图，input设置背景为透明，background:transparent;
不考虑ie，给你的小图标那一层加属性：pointer-events: none;

Answer 2

你外层用一个label 包住就能实现你这个功能，要不给 图片 加事件 可以利用 jquery的 trigger方法 触发 select picElement(图片元素).on('click',function(){

selectElement下拉框元素）.trigger("select");

})

Answer 3

抱歉抱歉，没有测试直接发错误代码，对不起；看这个 demo

原理：
1、你可以直接通过修改 select 的 size 属性来实现，但是这样比较丑，很明显；
原来：

修改 size:

跟原生比丑在两点：

1）位置上移了
2）滚动条出现了

2、比较好的实现，就是通过 js clone 一个 select，原来的 select 暂且称为 selectA，克隆后的 select 暂且称为 selectB；

题主这边点击 img 的时候，修改 selectB 的 size，这个时候option就都出来了，然后把它往下移到selectA 下面，解决了位置的问题；

然后修改宽度和overflow属性，一般情况下，比如 option 少于 10条时，不显示滚动条；大于 10 条时，再显示滚动条；这样就模拟了selectA 的点击情况，解决了滚动条的问题；

最后再监听 selectB 的 change 事件来修改 selectA 的值；

完

参考文档：

Simulate click on select element with jQuery

Answer 4

如果用的是select的标签的话，可以用透明度遮盖，调一下层级，直接点击的就可以的，如果想用js解决的话，可以根据楼上的那样写