下拉选择框可编辑

最新推荐文章于 2022-11-20 17:05:13 发布

丨彪丨

最新推荐文章于 2022-11-20 17:05:13 发布

阅读量301

点赞数

分类专栏：备忘录

本文链接：https://blog.csdn.net/up_biao/article/details/70236449

版权

备忘录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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);
		        });
		  	}
  	}





总结：奇葩需求的奇葩解决方式