jquery实现手机端弹出下拉选择及搜索效果代码-html代码-BFW代码库

jquery实现手机端弹出下拉选择及搜索效果代码

代码语言：html

代码描述：jquery实现手机端弹出下拉选择及搜索效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



    <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0" />



<style>
    @charset "utf-8";
.seach_name {
	display: block;
	font-size: 0.24rem;
	color: #666;
	border: 1px solid #e0e0e0;
	padding: 0.2rem 0.2rem;
	width: 88%;
	margin: 0.2rem auto;
	border-radius: 4px;
}

#mymodal {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 1rem;
	background-color: rgba(0, 0, 0, .6);
	display: none;
	z-index: 9999;
}

.modal-main {
	position: fixed;
	bottom: -900px;
	left: 0;
	height: 75%;
	width: 100%;
	background-color: #fff;
	font-size: .22rem;
	/*	margin-bottom: 0.3rem;*/
}

.address-title {
	font-size: 0.26rem;
	text-align: center;
	padding: 0.2rem 0;
	color: #222;
	border-bottom: 1px solid #EFEFEF;
	display: flex;
}

.address-title .cancel {
	color: #666;
}

.address-title .ensure {
	color: #1e83d3;
}

.address-title .title {
	font-weight: 700;
	flex: 2;
}

.close {
	position: absolute;
	padding: 0.05rem 0.25rem;
	right: 0rem;
	top: 0rem;
	color: #9a9da7;
	font-size: 0.5rem;
}

.optionwrapper {
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	padding-left: .2rem;
	height: .6rem;
	box-sizing: border-box;
}

.active-option {
	border-bottom: 1px solid #FF2440;
}

.option-content {
	position: absolute;
	top: 0.8rem;
	left: 0;
	right: 0;
	bottom: 0;
}

.option-group {
	display: none;
	overflow: auto;
	height: 100%;
	border-top: 1px solid #EFEFEF;
	padding: 0 .3rem;
}

.option-list {
	padding: .2rem .2rem;
	display: flex;
	border-bottom: 1px solid #efefef;
}

.checked {
	width: .15rem;
	height: .15rem;
	background-color: #FF304A;
	display: inline-block;
	margin-left: .2rem;
	border-radius: 50%;
	display: none;
	margin-top: .1rem;
}
</style>
	
</head>

<body>
    <form action="" style="display: flex;justify-content:center;">
        <input type="text" id="project" placeholder=".........完整代码请登录后点击上方下载按钮下载查看