下拉选择框可编辑
来源：互联网 发布：大数据分析和搜索引擎 编辑：程序博客网 时间：2024/05/20 03:06
<div class="dome"><input id="textBox" /> <ul><li value="123">0123</li><li value="123">1203</li><li value="123">1023</li><li value="123">1230</li> </ul> </div>
.dome{position: relative;}ul{position: absolute;top: 40px;left: 50px;z-index: 11;padding: 0;width: 170px;margin: 0;z-index: 10;background: #fff;display: none;}ul>li{list-style: none;}ul>li:hover{background: #998;}function editSelectBox(){var dome=window.document.querySelectorAll('.dome input'); //获取要下拉的文本框 for(var i=0;i<dome.length;i++){ var inputId=dome[i].id; var focus = false; $("#"+inputId).focus(function () { focus = true; $(this).next().css('display', 'block'); }).blur(function () { if (focus) { $(this).next().css('display', 'none'); } }).next().children().mousedown(function () { //获取当前点击的选项li focus = false; var value=this.innerHTML; that=$(this).parent; setTimeout(function(){//当ul瞬间为none时，短时间内阻止其他事件相应鼠标 that.css('display', 'none').prev().val(value); },50); }); } }
总结：奇葩需求的奇葩解决方式 0 0
