下拉列表框的隐藏和显示

最新推荐文章于 2021-11-07 14:18:21 发布
最新推荐文章于 2021-11-07 14:18:21 发布
阅读量6.4k 收藏 1
点赞数
分类专栏： javascript 文章标签： function div 报表 class javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coolwzjcool/article/details/1625289
版权
  
下拉列表框的隐藏和显示
<script language="javascript">
 
function show_ji(){
       document.getElementById('div1').style.visibility="visible";
}
function hide_ji(){
       document.getElementById('div1').style.visibility="hidden";
 
}
function show_yue(){
       document.getElementById('div2').style.visibility="visible";
 
}
function hide_yue(){
       document.getElementById('div2').style.visibility="hidden";
 
}
function show_ri(){
       document.getElementById('div3').style.visibility="visible";
 
}
function hide_ri(){
       document.getElementById('div3').style.visibility="hidden";
 
}
function together()
{
       if(document.form1.baobiaoleixing.value==001)
       {
              hide_ji();
              hide_yue();
              hide_ri();
       }
      
       if(document.form1.baobiaoleixing.value=="002")
       {
             
              hide_yue();
              hide_ri();
              show_ji();
 
       }
       if(document.form1.baobiaoleixing.value==003)
       {
              hide_ji();
              show_yue();
              hide_ri();
       }
       if(document.form1.baobiaoleixing.value==004)
       {
              hide_ji();
              show_yue();
              show_ri();
       }
      
 
}
</script>
 
</head>
<body style="overflow-x:hidden;overflow-y:auto">
<form name="form1">
 
 
<select name="baosongleixing">
                    <option>报送公安部 </option>
                    <option>报送市政府 </option>
                    <option>报送市公安局 </option>
                    <option>内部使用</option>
                  </select> &nbsp;&nbsp;
                             
                             <select name="year">
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                    <option>2006</option>
                    <option>2007</option>
                    <option>2008</option>
                    <option>2009</option>
                  </select>
                  年 &nbsp;&nbsp;
                             
                             <select name="baobiaoleixing" οnchange="together()">
                    <option value="001">年报表</option>
                    <option value="002">季报表</option>
                    <option value="003">月报表</option>
                    <option value="004">日报表</option>
                  </select>
                  </td>
                               <!--***************************************-->
                  <td class="txt" width="10%">
                  <div id="div1" style="visibility='hidden'">
                                                  
                     <select name="season" >
                    <option>第一季度</option>
                    <option>第二季度</option>
                    <option>第三季度</option>
                    <option>第四季度</option>
                  </select>
                  
                  </div>
                  </td>
                <!--***************************************-->
                   <td class="txt" width="10%">
                  <div id="div2" style="visibility='hidden'">
                   <select name="month" >
                   <option>1</option>
                   <option>2</option>
                   <option>3</option>
                   <option>4</option>
                   <option>5</option>
                   <option>6</option>
                   <option>7</option>
                   <option>8</option>
                   <option>9</option>
                   <option>10</option>
                   <option>11</option>
                   <option>12</option>
                  </select>
                  月
                  </div>
                  </td>
                   <!--***************************************-->
                             <td class="txt" width="10%">
                  <div id="div3" style="visibility='hidden'">
                    <select name="day" >
                   <option>1</option>
                   <option>2</option>
                   <option>3</option>
                   <option>4</option>
                   <option>5</option>
                   <option>6</option>
                   <option>7</option>
                   <option>8</option>
                   <option>9</option>
                   <option>10</option>
                   <option>11</option>
                   <option>12</option>
                   <option>13</option>
                   <option>14</option>
                   <option>15</option>
                   <option>16</option>
                   <option>17</option>
                   <option>18</option>
                   <option>19</option>
                   <option>20</option>
                   <option>21</option>
                   <option>22</option>
                   <option>23</option>
                   <option>24</option>
                   <option>25</option>
                   <option>26</option>
                   <option>27</option>
                   <option>28</option>
                   <option>29</option>
                   <option>30</option>
                   <option>31</option>
                          </select>
                  日
                  </div>
                  </td>
                             <!--***************************************-->  
coolwzjcool
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js在编辑框input下根据输入内容显示匹配内容的下拉列表
01-27
实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单： 将匹配的内容放在一个div中，input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问题： input的onblur中隐藏下拉div div的onmouseup 将选择的li内容设置到input 鼠标从Input移到下拉div并点击其中一个li的过程： onmousemove => onblur => onmousedown => onmouseup 这问题两手的地方是是当点击li之前触发onblur，会隐藏下拉div, 则不再触发onmousedown 现在解决办法有两个： 方案1： 触发Onmousemove时获取当前鼠标位置 在onblur事件时判断之前获取鼠标位置是否在下拉div的内部，如果在不隐藏下拉div,反之隐藏下拉div 方案2： 在触发onmousemove时设置标志 在触发onblur时判断标志，如果标志没有设置则隐藏下拉div 若标志已设置，为防止在下拉div外点击触发onblur,则需定时如300ms后对下拉div进行隐藏 若点击的是下拉div则位触发onmouseup事件，则些事件中取消前面设置的定时器
element下拉框选择选项时，其它下拉框隐藏
月影神社
12-15 2391
需求：选择“中介清单”时，机构类别显示;选择“银行机构情况”时，机构类别隐藏。 1.首先在“模板”下拉框添加@change="modChange" 2.在需要隐藏的下拉框添加v-if="moxs" 并在data中设置初始值为moxs = false（不可见） 3.编写change事件 ，判断条件根据自己实际情况。 我的下拉框值 如果是调用后台接口，先console.log一下后台传过来的值，然后再开发。 最后便可成功实现效果。 ...
jquery的隐藏和显示——下拉框式
weixin_30888413的博客
07-11 85
下拉框定义value值 后面写上onchange方法（onchange 事件会在域的内容改变时发生） 然后定义方法， 然后两个span解决。 转载于:https://www.cnblogs.com/ZFnice/p/5661032.html...
jquery隐藏式下拉菜单
kongjunchao159的博客
08-06 763
下拉菜单隐藏与显示
Tangayi的博客
08-11 785
&lt;script type="text/javascript"&gt; $(function(){ $('p:first span').css('color','red'); $('p:first + p').css('color','green'); $('a:last').css('color','red'); $('.sz').css('backg...
有选择功能的下拉框的显示与隐藏
weixin_51625354的博客
11-07 1142
先看运行效果 光标定位到按钮处 按Enter键，展开下拉框 选择成功，隐藏下拉框 ** 在注册界面的doAction()里判断是否触发<角色>按钮，触发则展开，并直接在旁边的空白处显示两个可选按钮（需要新创建一个Window的派生类实现），两个按钮选择其中一个后，调用部分清屏函数，并把选择的结果打印到框中（这个框是死框，单纯由线条打印，不是Edit类） ** 附上部分代码 if(res==3) { //下拉框选择角色 Tool
jQuery下拉列表框日期选择代码
06-10
在"jQuery下拉列表框日期选择代码"这个场景中，jQuery将用于响应用户的交互，如点击input框，以及控制日期时间选择器的显示和隐藏。 接下来，我们需要创建一个HTML结构，通常包含一个input元素，作为用户触发日期...
可选择和输入的下拉列表框示例
09-04
在网页设计和开发中，创建一个既可选择又可输入的下拉列表框可以提供用户更灵活的交互体验。这样的设计允许用户在预设的选项中选择，同时也可以自定义输入他们自己的值。这种功能通常用于那些可能有固定选项但又允许...
Android编程实现多列显示的下拉列表框Spinner功能示例
08-30
本示例将详细介绍如何在Android中创建一个多列显示的下拉列表框，即Spinner的变体。 首先，我们要理解这个实现的核心思路。实际上，这个所谓的“多列Spinner”并非原生的Spinner组件，而是通过自定义一个...
JS+CSS实现美化的下拉列表框效果
10-23
1. 控制下拉菜单的显示和隐藏：当用户点击下拉按钮时，JavaScript会添加或移除某个类，如`open`，来改变`<ul>`的`display`属性，从而实现下拉菜单的显示和隐藏。 2. 处理用户选择：监听`<option>`的点击事件，更新...
wxpython自定义下拉列表框过程图解
09-17
例如，可以通过修改`wx.ComboBox`的样式来改变其外观，或者通过处理按钮事件来控制下拉列表的显示和隐藏。 总结来说，wxPython的自定义下拉列表框涉及以下知识点： 1. 使用`wx.StaticText`创建边框，通过设置背景...
下拉框隐藏样式，只保留内容
weixin_34088583的博客
04-22 207
<style type="text/css"> select{ width:auto; direction: rtl; float: right;}select option { 　　direction: ltr;}select{ border: 0; appearance:none; -moz-appearance:none; -we...
下拉框值改变触发隐藏和显示
爱生活、爱dota、爱魔兽、爱编程、我不大梦想却很大.请不要叫我修电脑-告诉你我不会,我是--程序员
11-08 3000
$(document).ready(function(){ $("#p1,#p2").hide(); $("#sf").change(function(){ var a=$("#sf").val(); if(a=="1") {
html下拉菜单隐藏属性,css修改selec下拉菜单样式
weixin_35000379的博客
06-03 822
css修改selec下拉菜单样式2018-01-19 15:00修改select下拉菜单样式其实可以使用javascript来操作，这样更方便。但有些人并不喜欢，想用单纯的css来控制。以下有三种解决方案，看看哪一个合适。解决方案1 外观：无 - 与ie10-11解决方法要隐藏appearance: none选择元素上设置的默认箭头，请添加您自己的自定义箭头background-imagesele...
element下拉列表动态显示隐藏表格列数据
qq_45970524的博客
04-20 1493
先上效果图 上代码 这里用的是element的下拉菜单 + 多选 <el-checkbox-group v-model="checkList" style="float: right;margin-right:20px" > <el-dropdown :hide-on-click="false"> <el-button type="primary" plain size="
html下拉菜单的隐藏与显示不出来,这是段js下拉菜单隐藏和显示的代码，有些地方不太明白，请给解释一下。...
weixin_39732991的博客
06-07 537
匿名用户1级2012-02-24 回答这个也不复杂，不过感觉你的这个代码并不好的样子。//根据id获取对象function $(id) {return document.getElementById(id);}function showMenu(baseID,divID) {baseID=$(baseID);divID=$(divID);if(showMenu.timer)clearTimeout...
html隐藏与显示下拉框,jQuery设置下拉框显示与隐藏效果的方法分析_鹿岛_前端开发者...
weixin_39599454的博客
06-04 1889
本文实例讲述了$("select").hide(); // 隐藏下拉框$("select").show(); // 显示下拉框$("select").toggle(); // 如果下拉框是显示的则隐藏之，反之亦然示例代码如下1. 创建点击按钮可以显示或隐藏下拉框：请选择一个项目我不选选就选吧2. 设置div.box{width:300px;padding:20px;margin:20px...
实现下拉菜单显示隐藏的方法。
diandian82的专栏
11-21 4015
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" lang="gb2312"> body{font-size:14px;color:#6600FF;}ul{margin:0;padding:0;list-style:none;}ul li{padding:2px 0;}#Me
js控制select下拉框--动态隐藏，展示option
热门推荐
树欲静而风不止
03-29 4万+
如上图，下拉框中有六个option，如果想隐藏option我们该怎么办呢？（先拿chosen多选做示范） 只需要使用js找到对应的option，然后添加上 style->display：none即可 //遍历所有option，加上display属性 $('#form-field-select-4 option').each(function(){this.style='displ...
HTML隐藏式下拉列表
最新发布
06-19
HTML中的隐藏式下拉列表，也称为"隐藏选项菜单"或"隐形选择框"，是一种常见的表单元素，其`<select>`标签通常设置为`display: none;`以使其在视觉上不可见，但仍然可以通过JavaScript、jQuery或其他脚本语言进行交互...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值