2 jiaoxiaobin50 jiaoxiaobin50 于 2016.03.18 14:29 提问

多个下拉框样式隐藏问题

图片说明
我想在页面上显示一个下拉框,我前面有一个控制的代码,如果选择zazhi其他的下拉框隐藏,选择网站,其它的不显示,用js怎么实现,具体代码,谢谢

2个回答

qq_19891827
qq_19891827   2016.03.18 14:57
已采纳

在杂志的按钮下设置一个自定义属性 例如 data-sort='zazhi',网站的按钮下设置自定义属性 data-sort='wangzhan',app按钮下设置自定义属性data-sort='app',报纸按钮下设置自定义属性data-sort='baozhi';假设这四个按钮统一设置了一个class类为'btn';

 var btns=document.querySelectorAll('.btn');
var select=document.querySelectorAll('select');
for(var i=0;i<btns.length;i++){
    btns[i].onclick=function(){
        for(var t=0;t<select.length;t++){
            select[t].style.display='none';
        };
        var attr=this.getAttribute('data-sort');
        var s=document.querySelector('#'+attr);
        s.style.display='block';
    }
}

大概是这个样子

qq_19891827
qq_19891827 回复jiaoxiaobin50: 私信发你吧,我知道的也不多。
2 年多之前 回复
jiaoxiaobin50
jiaoxiaobin50 回复qq_19891827: 能加下你QQ么?我js好菜,下面我回复了一个问题,能帮忙解答下么,谢谢,
2 年多之前 回复
qq_19891827
qq_19891827 回复jiaoxiaobin50: 如果觉得有用请采纳谢谢
2 年多之前 回复
jiaoxiaobin50
jiaoxiaobin50 非常感谢
2 年多之前 回复
jiaoxiaobin50
jiaoxiaobin50   2016.03.18 15:44

还有另外一个问题,我想让下拉框使用一次就不能再选择了,让其变灰刷新页面后才能从新选择一次,谢谢大神,js技术比较薄弱,能否加你qq我的2234451367图片说明
这是另外一个下拉的代码。谢谢

渠道选择APP网站纸媒杂志
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
模拟select下拉框,解决ie9以下不支持替换小箭头
模拟select下拉框,解决ie9以下不支持替换小箭头
如何使用easyUI来隐藏下拉框combobox的下拉箭头(附带效果图)?
如何使用easyUI来隐藏下拉框combobox的下拉箭头(附带效果图)?前几天用easyUI做项目的时候碰见了一个问题,需要combobox下拉框但又不想让下拉框的箭头显示出来,就像我们使用百度的时候,你双击输入框就会自动显示下拉列表的内容,但是没有下拉框的那个下拉箭头,如下图所示:那么我们如何实现这个功能的呢? 其实很简单,只需下面的两行代码即可实现: $('#cmbRangeId').com
【jQuery easyUI】easyui-combobox下拉框按钮隐藏或取消
重写easyui-combobox的CSS样式
解决select2在bootstrap模态框中下拉框隐藏的问题
修改select2-container--open类 .http://blog.csdn.net/qq_34075559{ z-index: 9999999 !important; }
CSS怎么去掉select的下拉箭头样式(转)
废话不多说了,直接给大家贴css代码了,具体代码如下所示: select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance
清除Css中select的下拉箭头样式
只需要将以下代码放入css文件中即可: 如果想要有差别的取消,选择对应的选择器即可   对bootrap的select2同样适用 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-
唐伟俊自定义css样式
唐伟军自定义css样式,以及下拉框样式,div隐藏
JSP 下拉列表框、多行下拉列表框
1、下拉列表框:       语法:
自定义多个下拉选择框进行点击显示隐藏切换时,点击当前后点击其他,其他不会消失冲突
$('.wrapper-dropdown-3').each(function(index){   var a = $(this);   a.click(function(){     $(".wrapper-dropdown-3").not(a).removeClass('active');   })  })  $("body:not('.wrapper-dropdown-3')").
Boostrap实现下拉框改变样式
data-toggle="dropdown"> 主题 Java 数据挖掘 数据通信/网络 分离的链接 $(function(){    $(".dropdown a").click(function(){    $("#dropdownMenu1").html(this.innerHTML+'') }