可编辑下拉

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mymission/p/5703515.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS及JavaScript实现可编辑下拉框的方法。通过将输入框(input)与选择框(select)结合，实现了用户可以直接在下拉列表中搜索并编辑选项的功能。该方案利用了jQuery简化DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>可以编辑的下来框实现方法--woody.wu</title>
    <style type="text/css">
        .cssINPUT
        {
            height: 19px;
            padding: 3px;
            margin: 0PX;
            border: 1PX SOLID #C0C0C0;
            font-family: 宋体,arial;
            font-size: 9pt;
        }
        .select_div_list
        {
            position: absolute;
            border: 1px solid black;
            background-color: White;
            overflow: hidden;
            overflow-y: auto;
        }
        .select_div_list_ul
        {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }
        .select_div_list_ul li
        {
            cursor: pointer;
            padding-left: 3px;
            font-family: 宋体,arial;
            font-size: 9pt; *padding:0px;*height:20px;_height:14px;_margin:0px;_height:14px;*margin:0px;line-height:14px;}
        .selectSPAN
        {
            background-color: Yellow;
        }
    </style>
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   	<script type="text/javascript">
   	        var inputID = $("#input1");
   	        var selectID = $("#select1");
   	        var widt = 0;
   	        var inputWi = 0;
   	        var he = 0;
   	        $(function() {
   	          inputID = "input1";
   	            selectID = "select1";
   	            widt = 200;//select宽=200
   	            inputWi = widt - 20;//input宽
   	            he = $("#user").height() - 41;
   	            //console.log(he)
   	            var offset = $("input[id=input1]").offset();



   	            $("#" + selectID).change(function() {
   	                var newvar = $("#" + selectID).find("option:selected").text();
   	                $("#" + inputID).val(newvar);
   	                //select 选中把val给input
   	            }).click(function() {
   	                $("#select_div_on_key" + selectID).remove();
   	                //点击input清空val
   	            }).css({ "display": "block", "width": widt + "px", "z-index": 1, "clip": "rect(0px " + widt + "px 51px 151px)" });
   	 			//clip裁剪绝对定位图片     clip属性值：auto | rect (top, right, bottom, left)


   	            $("#" + inputID).keyup(function() {
   	                ShowSelectCombo();
   	            }).click(function() {
   	                ShowSelectCombo();
   	            }).css({ "z-index": 2, "width": inputWi + "px" }); ;
   	        });






   	        function ShowSelectCombo() {
   	            //var pob = $("#" + inputID);
   	            var pob = $("#input1");
   	           	// console.log(pob)
   	            var v = pob.val();
   	            //input  val 值



   	            var off = pob.offset();
   	            var wi = pob.width() + 16;
   	            //console.log(pob.width())
   	            var tp = off.top + pob.height() - 100 + 7;
   	            var lef = off.left - 200 + 2;



   	            var html = "<div class='select_div_list' id='select_div_on_key" + selectID + "' style='width:" + wi + "px;top:" + tp + "px;left:" + lef + "px;'><ul class='select_div_list_ul'>";
   	            $("#" + selectID).find("option").each(function() {
   	                var tk = $(this);
   	                html += "<li val='" + tk.val() + "' ht='" + encodeURIComponent(tk.html()) + "'>" + tk.html().replace(v, "<span class='selectSPAN'>" + v + "</span>") + "</li>";
   	            });
   	            html += "</ul></div>";





   	            var ulDIV = $("#select_div_on_key" + selectID);
   	            ulDIV.remove();
   	            $("#user").append(html);
   	            var ulDIV = $("#select_div_on_key" + selectID);
   	            var hei = ulDIV.find("ul").height();
   	            var newHeight = hei > he ? he : hei;
   	           	//console.log(newHeight)
   	      






   	            ulDIV.css({ height: newHeight + "px" });
   	            ulDIV.find("li").hover(function() {
   	                $(this).css({ "background-color": "#316ac5" });
   	            }, function() {
   	                $(this).css({ "background-color": "white" });
   	            });


   	            ulDIV.find("li").click(function() {
   	                var ki = $(this);
   	                var va = ki.attr("val");
   	                var htm = ki.attr("ht");
   	                htm = decodeURIComponent(htm);
   	                $("#" + inputID).val(htm);
   	                $("#" + selectID).val(va);
   	                ulDIV.remove();
   	            });
   	        }
   	 
   	    </script>
</head>
<body>
    <form name="form1" method="post" action="qqq.aspx" id="form1">
    	<div style='position: absolute; top: 100px; width: 500px; left: 200px; padding: 10px;
        height: 100px; border: 1px solid red;' id='user'>
        	<div>
            	<div style='overflow: hidden; margin-top: 10px; height: 30px;'>
                	<input id="input1" name="input1" type="text" class='cssINPUT' style='_height: 20px;
                    *height: 13px; display: block; float: left; position: absolute; border-right: 0px;' />
                	<select name="select1" id="select1" class="cssINPUT" style="float: left;
                    height: 27PX; position: absolute; cursor: pointer; margin-left: 2px;
                    padding: 0px;">
					    <option value="1">北京</option>
					    <option value="2">上海</option>
					    <option value="3">深圳</option>
					    <option value="4">广东</option>
					    <option value="5">太原</option>
					    <option value="6">西安</option>
					</select>
            	</div>
        	</div>
        </div>
    </form>
    <select name="" id="">
    	<option value="">1</option>
    	<option value="">1</option>
    	<option value="">1</option>
    	<option value="">1</option>
    	<option value="">1</option>
    </select>
</body>
</html>

转载于:https://www.cnblogs.com/mymission/p/5703515.html