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

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

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

<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值