手机版html中用input模拟select...

最新推荐文章于 2025-10-23 02:14:17 发布

原创最新推荐文章于 2025-10-23 02:14:17 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input模拟select

html页面专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的门店选择器实现方案，通过HTML、CSS和JavaScript完成下拉列表效果，支持点击展开与收缩，并允许用户从列表中选择特定门店。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>{:get_title()}</title>
<script type="text/javascript" src="__CSS__/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ 
    $(".input_select").click(function(){
    var ul = $("#dropdown ul");
    if(ul.css("display")=="none"){
    ul.slideDown("fast"); 
    }else{ 
    ul.slideUp("fast"); 
    } 
    }); 
    $("#dropdown ul li a").click(function(){ 
    var txt = $(this).text(); 
    $(".input_select").val(txt); 
    $("#dropdown ul").hide();
    });
});
</script>
</head>
<body>
<style type="text/css">
ul,li{list-style:none;padding:0;margin:0;} 
#dropdown{position:relative} 
.input_select{width:96%; height:40px; line-height:40px;border: none; background:#eee; border-bottom: 1px solid #ddd; margin-bottom: 2px;padding-left: 2%;} 
#dropdown ul{width:98%; margin-left: 1%; background:#fff; position:absolute; display:none;border-bottom:1px solid #60c8f2} 
#dropdown ul li{height:40px; line-height:40px; text-indent:10px;border-top: 1px solid #60c8f2;} 
#dropdown ul li:first-child{border-top: none;}
#dropdown ul li a{display:block; height:40px; color:#807a62; text-decoration:none} 
#dropdown ul li a:hover{background:#c6dbfc; color:#369} 
</style>
<div id="main_container">
    <include file="Public/header"/>
    <div class="main_content">
        <include file="Public/menu"/>
        <div class="center_content">
            <div class="left_content2">
                <div id="dropdown"> 
                    <input class="input_select" id="" type="text" placeholder="选择门店"/> 
                    <ul> 
                        <li><a href="#" rel="0">全部</a></li>
                        <li><a href="#" rel="03">二店</a></li> 
                        <li><a href="#" rel="04">三店</a></li> 
                        <li><a href="#" rel="05">五店</a></li> 
                        <li><a href="#" rel="06">六店</a></li>
                        <li><a href="#" rel="07">七店</a></li> 
                        <li><a href="#" rel="08">八店</a></li>                          
                    </ul> 
                </div> 
</div>    
        </div>
    </div>
</div> 
</body>
</html>