让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 >
blur事件<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>
复制按钮的模板
要注意⼀个点，id为myCopyVal放在此处是为了⽅便定位元素，再调⽤⽂本select()⽅法，调⽤此⽅法时要求dom元素不能隐藏所以需⽤opacity:0代替 type="hidden" | display:none | visibility:hidden
<script type="text/template" id="btn-tpl">
<p id="myCopy" >
<input type="button" id="myCopyBtn" value="复制"/>
<input type="text" id="myCopyVal" value="{{val}}"/>
</p>
</script>
JS部分
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
// 模拟size的变化
$('select')
.focus(function() {
// 动态设置size⽀持option的事件监听
this.size = this.children.length;
})
.blur(function() {
// 恢复
this.size = 1;
})
.change(function() {
// 上下快捷键操作时，隐藏按钮
$('#myCopy').remove();
$('#select-val').val(this.value);
});
$('option')
// 右键展⽰复制按钮
.contextmenu(function(e) {
$('#myCopy').remove();
$('body').append($('#btn-tpl').html()
// 设置按钮位置
.replace('{{Y}}', e.pageY)
.replace('{{X}}', e.pageX + 10)
.replace('{{val}}', Content || e.target.innerText)
);
return false;
})
// 点击操作恢复正常select
.click(function() {
$('#myCopy').remove();
$(this).parent().blur();
});
$(document)
// 直接Enter键模拟select选择
.keydown(function(e) {
if (e.keyCode === 13) {
$('#myCopy').remove();
$('select').blur();
}
})
// 点击外部区域，隐藏按钮
.
click(function(e) {
if (e.target.id !== 'myCopyBtn') {
$('#myCopy').remove();
}
});
// 执⾏复制操作
$(document).on('click', '#myCopyBtn', function() {
var $this = $(this);
// 复制
$().select();
/
/ 这⾥先不直接remove，防⽌循环引⽤
$this.parent().hide();
// 再次展⽰select下拉
$('select').focus();
});
</script>
当然了，这个execCommand⽅法可能在某些浏览器上不⽀持，这⾥还没做兼容，复制功能也还有些简陋就酱

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。