js简单的下拉选中效果

css样式：

*{ margin:0px auto; padding:0px}
#xiala{ width:180px; height:33px; border:1px solid #999;text-align:center; line-height:33px; vertical-align:middle; }
#xiala:hover{ cursor:pointer}#zi{width:180px; height:150px; border:1px solid #63C; border-top:0px; display:none}.list{width:180px; height:33px; text-align:center; line-height:33px; vertical-align:middle; border-bottom:1px solid #63C; background-color:#CCC}
.list:hover{ cursor:pointer; background-color:#63C; color:white}

html代码：

<div style="width:700px; height:500px; margin-top:30px"><div id="xiala" onclick="Show()"></div>    <div id="zi"><div class="list" onclick="Xuan(this)">山东</div><div class="list" onclick="Xuan(this)">淄博</div><div class="list" onclick="Xuan(this)">张店</div></div>
</div>

JS代码：

function Show()
{document.getElementById("zi").style.display="block";
}
function Xuan(ys)
{var v = ys.innerText;document.getElementById("xiala").innerText = v;document.getElementById("zi").style.display="none";
}

转载于:https://www.cnblogs.com/UC0079/p/6412206.html

js简单的下拉选中效果相关推荐

手机端自定义简单的下拉动画效果选择框解决过渡失效
手机端自定义简单的下拉动画效果选择框解决过渡失效 <template> // 弹出框触发并显示选择结果<view class="header_top_sel" ...
js手机端下拉刷新效果demo效果示例（整理）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
jquery实现简单的下拉菜单
本文用简单的几行jquery代码实现简单的下拉菜单效果看效果 html <ul><li>主题市场<ul><li>运动派<ul><li ...
html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单 Gary_js实现简单的下拉折叠菜单 *{margin:0px; padding:0px;} #div1 {width:200px; margin:0 a ...
html option ajax,Ajax实现简单下拉选项效果【推荐】
基本都是固定步骤!主要在JAVASCRIPT和PHP中的操作 1.HTML代码里就只有两个SELECT标签如下: 请选择请选择 2.Javascript中进行创建选项和执行AJAX异步请求步骤如下 ...
html5实现下拉刷新页面,原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
html 下拉列表模糊查询,JS实现模糊查询带下拉匹配效果
"搜索"可以使我们更快的找到某一个关键词或者某一个商品,所以"模糊查询"和"下拉匹配"也成了前端必备的一个小技能,开门见山,希望对朋友们有帮 ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...

js简单的下拉选中效果

js简单的下拉选中效果相关推荐

最新文章

热门文章