全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：400-708-3566

js实现下拉菜单效果

效果图：

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{
   margin: 0;
   padding: 0;
   }
   body {
   width: 460px;
   margin: 0 auto;
  font-family: "微软雅黑";
 }
 .search{
  height: 23px;
  line-height: 23px;
  border-bottom: 1px solid #d4d4d4;
  font-weight: 600;
 }
 .search img{
  float: left;
  display: inline-block;
  margin-top: 5px;
 }
 .search span{
  float: left;
  font-size: 14px;
  margin-left: 4px;
 }
 .content1{
  height: 254px;
  width: 100%;
  background: #f5f5f5;
  border-top: 1px solid #eaeaea;
  padding-top: 10px;
 }
 .content1 .content1_div{
  width: 90%;
  height: 43px;
  margin: 5px auto;
 }
 .left{
  width: 30%;
  height: 43px;
  border: 1px solid #eaeaea;
  font-size: 14px;
  text-align: center;
  line-height: 43px;
  float: left;
 }
 .right{
  width: 68%;
  height:43px;
  border: 1px solid #eaeaea;
  font-size: 14px;
  text-align: center;
  line-height: 43px;
  float: left;
  background: #fff;
  margin-left: 3px;
 }
 .right .right_select{
  display: inline-block;
  width: 90%;
  height: 20px;
  border: none;
  border: 1px solid #a4bed4;
  text-align: center;
  direction: center;
 }
 .right_select option{
  text-align: center;
 }
 .hecha{
  text-align: center;
  margin-top: 15px;
 }
 .jdcxx{
  height: 146px;
  font-size: 14px;
  background: #ebebeb;
  background-size:cover;
  padding-top: 20px;
 }
 .jdcxx p,.jdcsyrxx p{
  margin-left: 20px;
  font-weight: 600;
  line-height: 33.6px;
  font-size: 14px;
 }
 .jdcxx .xx,.jdcsyrxx .xx{
  font-weight: 100;
 }
 .jdcsyrxx{
  margin-top: 20px;
  padding-top: 20px;
  height: 146px;
  font-size: 20px;
  background:#ebebeb;
  background-size:cover;
 }
 .hcr,.hcsj{
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #d4d4d4;
 }
 .hcr_left{
  display: block;
  float: left;
  height: 28px;
  width: 2px;
  margin-top: 1px;
  background: #226ed2;
 }
 .zc{
  width: 100px;
  display: block;
  float: left;
  text-align: right;
  margin-left: 10px;
  margin-right: 10px;
 }
 .xm,.sj{
  font-weight: 600;
 }
 .xiala_div{
  top: 33px;
  display: none;
  z-index: 600;
  border: 1px solid #A4BED4;
  width: 253px;
  left: 13px;
 }
 .xiala_input{
  line-height: 21px;
  width: 253px;
  border: none;
  outline: none;
  margin: 0;
  text-align: center;
  cursor: default;
  background: #fff;
  color: #000;
 }
 .xiala_input:hover{
  background: #a4bed4;
 }
  </style>
  <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_8q2l5tghvcvm42t9.css
"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
 <header>
 <div class="search">
  <img width="" src="img/img_09.png"/>
  <span>查询</span>
 </div>
 </header>
 <div class="content1">
 <div class="content1_div">
  <div class="left">
  号牌种类:
  </div>
  <div class="right" style="position: relative;">
  <input type="text" name="" id="" readonly value="小型汽车号牌" class="right_select"/>
  <span style="position: absolute;right: 18px;top: 2px;font-size: 10px; color: #a4bed4;" class="xialaan icon-icon09 iconfont" ></span>
  <div class="xiala_div" style="position: absolute;top;line-height: 20px;" >
   <input type="text" class="xiala_input" readonly name="" id="" value="小型汽车号牌" />
   <input type="text" class="xiala_input" readonly name="" id="" value="大型汽车号牌" />
   <input type="text" class="xiala_input" readonly name="" id="" value="中型汽车号牌" />
  </div>
  </div>
 </div>
 <div class="content1_div">
  <div class="left">
  车牌号码:
  </div>
  <div class="right" style="position: relative;">
  <input type="text" name="" id="" readonly value="鲁" class="right_select"/>
  <span style="position: absolute;right: 18px;top: 2px;font-size: 10px; color: #a4bed4;" class="xialaan icon-icon09 iconfont" ></span>
  <div class="xiala_div" style="position: absolute;top;line-height: 20px;" >
   <input type="text" class="xiala_input" readonly name="" id="" value="晋" />
   <input type="text" class="xiala_input" readonly name="" id="" value="京" />
   <input type="text" class="xiala_input" readonly name="" id="" value="豫" />
  </div>
  </div>
 </div>
 <div class="content1_div">
  <div class="left">
  </div>
  <div class="right" style="position: relative;">
  <input type="text" name="" id="" value="A" readonly class="right_select"/>
  <span style="position: absolute;right: 18px;top: 2px;font-size: 10px; color: #a4bed4;" class="xialaan icon-icon09 iconfont" ></span>
  <div class="xiala_div" style="position: absolute;top;line-height: 20px;" >
   <input type="text" class="xiala_input" readonly name="" id="" value="A" />
   <input type="text" class="xiala_input" readonly name="" id="" value="B" />
   <input type="text" class="xiala_input" readonly name="" id="" value="C" />
  </div>
  </div>
 </div>
 </div>
 <script type="text/javascript">
 var xialakuang = $(".xialaan");
 var right_select = $(".right_select");
 var xiala_div = $(".xiala_div")
  for( var i=0;i<xialakuang.length;i++ ){
  xialakuang[i].index = i;
  var onOff = true;
  var This =i;
  xialakuang[i].onclick = function(){
   if(onOff) {
   for( var j=0;j<xiala_div.length;j++ ){
    if( this.index == j ){
    xiala_div[j].style.display = 'block';
    var xiala_input = xiala_div[j].getElementsByClassName("xiala_input");
    if(j==0){
     for(var k=0;k<xiala_input.length;k++){ 
     xiala_input[k].index = k;
     xiala_input[k].onclick=function(){
      var value = xiala_input[this.index].value;
      right_select[0].value=value;
     $(".xiala_div").css("display", "none")
     }
    }
    }
    if(j==1){
     for(var k=0;k<xiala_input.length;k++){ 
     xiala_input[k].index = k;
     xiala_input[k].onclick=function(){
      var value = xiala_input[this.index].value;
      right_select[1].value=value;
      $(".xiala_div").css("display", "none")
     }
    }
    }
     if(j==2){
     for(var k=0;k<xiala_input.length;k++){ 
      xiala_input[k].index = k;
      xiala_input[k].onclick=function(){
      var value = xiala_input[this.index].value;
      right_select[2].value=value;
      $(".xiala_div").css("display", "none")
      }
     }
     }
    }else{
    xiala_div[j].style.display = 'none';
    }
   }
   }else{
   $(".xiala_div").css("display", "none")
   }
   onOff=!onOff
  }
  }
  for( var i=0;i<right_select.length;i++ ){
  right_select[i].index = i;
  var onOff = true;
  var This =i;
  right_select[i].onclick = function(){
   if(onOff) {
   for( var j=0;j<xiala_div.length;j++ ){
    if( this.index == j ){
    xiala_div[j].style.display = 'block';
    var xiala_input = xiala_div[j].getElementsByClassName("xiala_input");
    if(j==0){
     for(var k=0;k<xiala_input.length;k++){ 
     xiala_input[k].index = k;
     xiala_input[k].onclick=function(){
      var value = xiala_input[this.index].value;
      right_select[0].value=value;
      $(".xiala_div").css("display", "none")
     }
    }
    }
    if(j==1){
     for(var k=0;k<xiala_input.length;k++){ 
     xiala_input[k].index = k;
     xiala_input[k].onclick=function(){
      var value = xiala_input[this.index].value;
      right_select[1].value=value;
      $(".xiala_div").css("display", "none")
     }
     }
    }
     if(j==2){
     for(var k=0;k<xiala_input.length;k++){ 
      xiala_input[k].index = k;
      xiala_input[k].onclick=function(){
      var value = xiala_input[this.index].value;
      right_select[2].value=value;
      $(".xiala_div").css("display", "none")
      }
     }
     }
    }else{
    xiala_div[j].style.display = 'none';
    }
   }
   }else{
   $(".xiala_div").css("display", "none")
   }
   onOff=!onOff
  }
  }
 </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！


# js  # 下拉菜单  # javascript结合CSS实现苹果开关按钮特效  # JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】  # 原生JS实现导航下拉菜单效果  # JavaScript下拉菜单功能实例代码  # js实现省份下拉菜单效果  # JavaScript省市级联下拉菜单实例  # js实现按钮开关单机下拉菜单效果  # 号牌  # 微软  # span  # top  # block  # size  # inline  # weight  # solid  # left  # display  # img  # float  # right_select  # fff  # hecha  # direction  # option  # eaeaea  # background 


相关文章： 全景视频制作网站有哪些,全景图怎么做成网页？  如何选择靠谱的建站公司加盟品牌？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  公司网站制作需要多少钱,找人做公司网站需要多少钱？  台州网站建设制作公司,浙江手机无犯罪记录证明怎么开？  武清网站制作公司,天津武清个人营业执照注销查询系统网站？  建站为何优先选择香港服务器？  建站之星五站合一营销型网站搭建攻略，流量入口全覆盖优化指南  PHP 500报错的快速解决方法  为什么Go需要go mod文件_Go go mod文件作用说明  制作网站的过程怎么写,用凡科建站如何制作自己的网站？  微信小程序制作网站有哪些,微信小程序需要做网站吗？  视频网站app制作软件,有什么好的视频聊天网站或者软件？  网站制作公司排行榜,抖音怎样做个人官方网站  制作农业网站的软件,比较好的农业网站推荐一下？  红河网站制作公司,红河事业单位身份证如何上传？  IOS倒计时设置UIButton标题title的抖动问题  如何安全更换建站之星模板并保留数据？  Java解压缩zip - 解压缩多个文件或文件夹实例  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  linux top下的 minerd 木马清除方法  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  如何选购建站域名与空间？自助平台全解析  建站主机系统SEO优化与智能配置核心关键词操作指南  购物网站制作公司有哪些,哪个购物网站比较好？  济南企业网站制作公司,济南社保单位网上缴费步骤？  山东云建站价格为何差异显著？  可靠的网站设计制作软件,做网站设计需要什么样的电脑配置？  如何通过建站之星自助学习解决操作问题？  如何用AWS免费套餐快速搭建高效网站？  历史网站制作软件,华为如何找回被删除的网站？  如何高效配置IIS服务器搭建网站？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  建站主机如何选？性能与价格怎样平衡？  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  如何快速使用云服务器搭建个人网站？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  建站之星代理如何获取技术支持？  建站之星安装失败：服务器环境不兼容？  网站专业制作公司有哪些,做一个公司网站要多少钱？  开源网站制作软件,开源网站什么意思？  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  郑州企业网站制作公司,郑州招聘网站有哪些？  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  公众号网站制作网页,微信公众号怎么制作？  桂林网站制作公司有哪些,桂林马拉松怎么报名？  香港服务器租用每月最低只需15元？ 

返回目录 在线咨询
上一篇：使用Linux VPS建站时如何进行数据备份和恢复？
下一篇： 日照音乐制作网站有哪些,孙楠日照之恋歌曲歌词？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

©  云南转妮洋科技有限公司 版权所有   滇ICP备2024034437号 
联系电话： 400-708-3566   E-mail：915688610@qq.com
主营业务：网络营销推广、网站SEO优化、网站定制、营销型网站建设、微商城制作、三级分销系统开发
电话沟通
在线客服