让 select 的 option 标签支持事件监听（如复制操作）

这标题，让option支持事件监听，应该不难的呀，有什么好讲的？

其实还是有的，默认在浏览器代码是无法直接对option标签进行操作的，不仅包括JS事件监听，还是CSS样式设置

查了一些资料，姑且认为它是系统OS级别处理的

 

想自定义option的样式，很多人会建议用 <ul> <li> 标签来辅助同步操作与值

想对option进行事件监听，有一个tip：当给select显示设置了size 属性且值 大于1 时，才能监听

 

近来产品也提了个鼠标操作复制option值的需求，就利用这个size属性实现一番吧

先看图

实现小析

因为select的size属性表示默认展示多少个option，并设置这个高度

不过有了size之后，默认select右侧就会出现滚动条式样，加个 overflow:hidden 处理就行了

此外，功能操作与原select也有一些些不同，也要模拟处理

右键后生成一个复制按钮，点击复制则调用浏览器自身的复制命令

 

HTML

    <p>
        <input type="text" id="select-val" placeholder="值" size="1">
        <input type="text" id="copy-test" placeholder="测试复制">
    </p>

    <select style="overflow:hidden;">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
        <option value="5">five</option>
    </select>

复制按钮的模板