法一、

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

修改 size:

跟原生比丑在两点：

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

法二、

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

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

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

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

demo

参考文档：

Simulate click on select element with jQuery