上图示
这里是select选框,初始化显示和平常一样
点击文本框选择,会弹出浮动层,显示选项,并且有清空,关闭,按钮
点击后,会把选项里的内容添加到文本框里面
html代码
<div class="spyy-box step-2">
办理单位:<input type="text" id="spyy-danwei" name="b" onfocus="b.blur()" />
<div class="select-danwei" >
<div class="spyy-title">
<b>请选择办理单位</b>
<em>关闭</em>
<span>清空</span>
</div>
<ul>
<li>税务局</li>
<li>发改委</li>
<li>规划局</li>
<li>技术监督局</li>
<li>烟草专卖局</li>
<li>文广新局</li>
<li>供电公司</li>
<li>气象局</li>
<li>土地流转中心</li>
<li>农牧局</li>
<li>税务局</li>
<li value="33">发改委</li>
</ul>
</div>
办理事项:<input type="text" id="spyy-content" />
</div>
javascript代码
这里使用的是JQ库
<script type="text/javascript">
$(document).ready(function(){
//选择单位
$('#spyy-danwei').click(function(){
$('.select-danwei').fadeIn('fast');
});
//对每一个li元素监听
$('.select-danwei li').each(function(i){
$(this).click(function(){
$('#spyy-danwei').val(($(this).text()));
$('.select-danwei').fadeOut('fast');
});
});
//标题栏关闭和清空
$('.spyy-title em').click(function(){
$('.select-danwei').fadeOut('fast');
});
$('.spyy-title span').click(function(){
$('.select-danwei').fadeOut('fast');
$('#spyy-danwei').val("");
});
});
</script>
附件可下载
静静深夜 月涌江流
心似晴空 理想当头
行似深夜 智慧江流
人生代代 无穷无已
你来我往 谁为先手
人生如棋 黑白相间
局里局外 一生好走
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。