记录一个前端筛选下拉功能代码

最新推荐文章于 2024-02-29 14:24:04 发布

party_hui

最新推荐文章于 2024-02-29 14:24:04 发布

阅读量641

点赞数

分类专栏：前端文章标签：筛选下拉

本文链接：https://blog.csdn.net/qq_42941946/article/details/88569552

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

记录一个前端筛选下拉功能代码

效果图
作为后端，调查试验效果的，就没有再调节样式了=_=
其中需要修改项：

<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
		<link href="js/jqueryUI/chosen/chosen.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="js/jqueryUI/chosen/chosen.jquery.js"></script>

		<body>
			<style type="text/css">
				.second select {
					width: 11%;
					height: 106px;
					margin: 0px;
					outline: none;
					border: 1px solid #999;
					margin-top: 31px;
				}
				
				.second input {
					width: 167px;
					top: 9px;
					outline: none;
					border: 0pt;
					position: absolute;
					line-height: 30px;
					left: 8px;
					height: 30px;
					border: 1px solid #999;
				}
				
				.second ul {
					position: absolute;
					top: 27px;
					border: 1px solid #999;
					left: 8px;
					width: 125px;
					line-height: 16px;
				}
				
				.ul li {
					list-style: none;
					width: 161px;
					/* left: 15px; */
					margin-left: -40px;
					font-family: 微软雅黑;
					padding-left: 4px;
				}
				
				.blue {
					background: #1e91ff;
				}
			</style>
			<span class="second">
				<input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入" />
				<select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;">
					<option value="">1</option>
					<option value="">2</option>
					<option value="">12323</option>
					<option value="">31</option>
					<option value="">1332</option>
					<option value="">412</option>
					<option value="">42</option>
					<option value="">11</option>
				</select>
			</span>

			<script type="text/javascript">
				var TempArr = []; //存储option

				$(function() {
					/*先将数据存入数组*/
					$("#typenum option").each(function(index, el) {
						TempArr[index] = $(this).text();
					});
					$(document).bind('click', function(e) {
						var e = e || window.event; //浏览器兼容性   
						var elem = e.target || e.srcElement;
						while(elem) { //循环判断至跟节点，防止点击的是div子元素   
							if(elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {
								return;
							}
							elem = elem.parentNode;
						}
						$('#typenum').css('display', 'none'); //点击的不是div或其子元素   
					});
				})

				function changeF(this_) {
					$(this_).prev("input").val($(this_).find("option:selected").text());
					$("#typenum").css({
						"display": "none"
					});
				}

				function setfocus(this_) {
					$("#typenum").css({
						"display": ""
					});
					var select = $("#typenum");
					for(i = 0; i < TempArr.length; i++) {
						var option = $("<option></option>").text(TempArr[i]);
						select.append(option);
					}
				}

				function setinput(this_) {
					var select = $("#typenum");
					select.html("");
					for(i = 0; i < TempArr.length; i++) {
						//找到含有txt的内容的，添option
						if(TempArr[i].indexOf(this_.value) != -1) {
							var option = $("<option></option>").text(TempArr[i]);
							select.append(option);
						}
					}
				}
			</script>
		</body>

</html>