select下拉列表框---控制DIV的显示隐藏

最新推荐文章于 2024-04-19 22:31:37 发布
最新推荐文章于 2024-04-19 22:31:37 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： div generator html class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ran1004/article/details/6714563
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<script>
function jumpMenu(selObj){

var x=document.getElementById(selObj.options.selectedIndex);
var y=document.getElementsByTagName("div");


for(i=0;i<y.length;i++){
if(y[i].getAttribute("name") == "xxx"){
if(y[i].id=='0'){
y[i].style.display='';
}else{
y[i].style.display='none';
}


if(y[i].id==selObj.options.selectedIndex){

y[i].style.display='';
break;
}
else{
y[i].style.display='none'
}
}


}

}
</script>
 <BODY>
  <select class="f_line" onChange="jumpMenu(this)">
                                            
                                       <option value="0" >0000</option>
                                       
                                           <option value="1" >111</option>
   <option value="2" >222</option>
                                 <select>


<div id="0" name="xxx">aaaaaa</div>
<div id="1" name="xxx" style="display:none">bbb</div>
<div id="2" name="xxx" style="display:none">cccc</div>
 </BODY>
</HTML>
ran1004
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 操作select下拉列表框的一点小经验
12-03
按照我一贯的web开发风格，所有不直接操作数据库的事件，都尽可能由javascript来实现，所以这个需求我打算使用js来完成。 首先来分析一下具体情况：这个页面是一个更新页面，品牌有品牌1和品牌2两个字段，品牌2可以为空，品牌1不能为空，所以品牌2的下拉列表框比品牌1多一项；如果选择了品牌的前8相中的任意一项，“活跃状态”要隐藏，否则“活跃状态”默认显示状态为“潜在”；当查询的结果品牌1和品牌2有任意一项在品牌的前8相中，“活跃状态”也要隐藏，否则“活跃状态”默认显示状态为“潜在”。 页面部分内容 代码如下: <div id=”div_Brand_Baby” name=”div_Brand
模拟下拉框 css html,用div模拟select下拉菜单【原创】
weixin_39905500的博客
06-03 624
select下拉菜单在不同版本的浏览器下显示的样式会有所不同，特别是在ie低版本中，select自带的样式去不掉。以下是用div来模拟select下拉菜单具体代码：div模拟select下拉菜单校内链接校内链接校内链接校内链接校内链接校内链接办公室办公室办公室办公室办公室办公室办公室办公室组织部(党校)宣传部(新闻中心)统战部(港澳台事务办公室)人事处教务处(招办)常用链接国家环保部教育部省环保厅...
轻松使用div模拟select下拉菜单
weixin_33948416的博客
01-06 88
没有办法，平时不是万不得已我是不喜欢去模拟各类控件的，一个是麻烦，二个是对性能也有些影响，还是原生的来的实在。老板昨天发话，必须模拟赶紧的，老外最喜欢简洁干净的风格，说的貌似都很在理的样子，业务部也是一样，都是一些不懂产品的人来提需求哈哈，不说啦。功能也不难就是多耗了我一点点时间，本来是不用做的，任务早就做完了。为了满足老板提的需求我还是改了，尊重她的选择，毕竟人家是老板，这叫“做事不依东，累死都...
html5隐藏下拉框,js下拉框实现div显示和隐藏
weixin_31446915的博客
06-03 569
菜鸟教程(runoob.com)div{display:none;}内部通知实验项目作者成员：作者成员：上限日期：进入查看：www.baidu.comvar select = document.getElementById("select1");select.onchange = function(){var options = select.getElementsByTagName("optio...
如何用css和div控制html页面中的下拉列表框(select)
weixin_34138377的博客
11-02 250
2019独角兽企业重金招聘Python工程师标准>>> ...
区域联动自定义div实现select标签的选择效果
申谊的博客
12-07 985
因项目对区域的样式有要求，而select标签的option不能自定义，故通过div实现select标签的选择效果。 说明如下： 1.实现点击文字框和⌵区域框出现，点击其他地方区域框关闭，通过在该页面的最大级div(非body)上增加点击事件实现：ng-click="areaHide($event)"; 2.为实现整个框都可以点击，增加$event.stopPropagation()，阻止冒泡；...
JQuery通过radio，select改变隐藏显示div
热门推荐
Thankdj
10-05 1万+
1）select下拉框控制div的隐藏与显示 function checkYear() { var selectValue = $("select[name='periodType']").val(); if(selectValue == 1){ $("#isPeriodYearHalf").hide();
html怎么隐藏一个元素,html怎么隐藏div元素
weixin_33121345的博客
06-03 4402
html隐藏div元素的方法：1、在div标签中使用hidden属性，添加“hidden="hidden"”语句即可。2、在div标签中使用style属性，添加“display: none;”样式即可。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。方法1：使用hidden属性html hidden 属性规定对元素进行隐藏。如果使用该属性，则会隐...
html中怎么让一个div显示或隐藏,怎么让一个div显示一个div隐藏?
weixin_32998893的博客
06-03 2453
让一个div显示一个div隐藏的方法如下(代码的规格写法只能这样)：1、HTML代码如下：menu0menu1menu2menu3menu4menu5menu6menu7d0d1d2d3d4d5d6d72、CSS代码：.point{float: left;list-style: none;}.point li{margin-bottom: 10px;}.box{float: right;margi...
通过select下拉框里的value控制div显示与隐藏
祈澈菇凉
03-27 6332
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/2.0.0/jque
jquery+css+div实现select选择框样式
07-15
意思就是给这个隐藏域赋值就相当于用丑陋的select下拉列表得到一个值是同理的。下拉列表的功能无非也就是传一个值提交过去。 此form select下拉控件是使用div+jq+css实现，其表单功能正常使用，能正常传值。根据需要...
快速解决bootstrap下拉菜单无法隐藏的问题
12-29
下拉菜单的两种实现 想必大家都知道，bootstrap为我们提供了一个下拉菜单的组件，官方也为我们提供两种使用方法 1.标签指定data-toggle <div class=dropdown> <button type=button class=btn dropdown-toggle ...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向多级滑动导航菜单 2.jQuery+CSS漂亮蓝色三级菜单下载 3....
javascript树型组件可做弹出的树型下拉列表
07-07
东西一般般，属于最简单的树型组件，高手止步 已基本有弹出树型下拉列表的框架，只是没有加上显示和隐藏div的方法 另外ie6下最好加上个iframe背景，解决select不支持z-index的BUG
用html写文本变形动画
liulang68的博客
04-15 473
【代码】用html写文本变形动画。
html--玫瑰
最新发布
stqer的博客
04-19 165
【代码】html--玫瑰。
HTML 入门
lvshihao_的博客
04-16 928
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
【HTML】制作一个简单的实时字体时钟
qq_70814008的博客
04-11 1530
整体上，这个网页应用程序通过HTML提供了页面结构，CSS赋予了页面美观的样式，而JavaScript则让页面具有动态更新和用户交互的能力。三者共同协作，实现了一个既美观又实用的动态时钟和日期时间转换工具。
js自动缩放页面，html自动缩放页面，大屏自动缩放页面，数字看板自动缩放页面，大数据看板自动缩放页面
橙-极纪元-cplvfx-JJY.Cheng
04-19 79
js自动缩放页面，html自动缩放页面，大屏自动缩放页面，数字看板自动缩放页面，大数据看板自动缩放页面
v-if写一个选择下拉列表
05-18
下面是一个使用 `v-if` 来实现选择下拉列表的示例： ```html <template> <div> <label for="fruit">请选择一种水果：</label> <select v-if="showFruit" id="fruit" name="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> <option value="grape">葡萄</option> </select> <button @click="toggleShowFruit">{{ showFruit ? '隐藏' : '显示' }}水果选择</button> </div> </template> <script> export default { data() { return { showFruit: false }; }, methods: { toggleShowFruit() { this.showFruit = !this.showFruit; } } }; </script> ``` 在上面的代码中，我们使用 `v-if` 来控制是否显示选择下拉列表。初始时，列表是隐藏的。当点击按钮时，通过 `toggleShowFruit` 方法来切换 `showFruit` 数据属性的值，从而决定是否显示列表。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值