精华内容
下载资源
问答
  • SELECT中OPTION元素的显示隐藏

    万次阅读 2017-07-31 00:09:18
    在Chrome和Firefox浏览器,有两种方式控制显示隐藏。 1、option元素的hidden属性,true为隐藏,false为显示; 2、option元素的style.display设置为none则为隐藏; 这两种方式都可以通过JS来控制。在IE,很...

    在Chrome和Firefox浏览器中,有两种方式控制显示隐藏。
    1、option元素的hidden属性,true为隐藏,false为显示;
    2、option元素的style.display设置为none则为隐藏;
    这两种方式都可以通过JS来控制。

    在IE中,很麻烦,上面两种方式都不支持,目前的办法是给外面加一层隐藏的span,参考网址:http://blog.baiwand.com/?post=162
    参考网址中用了jQuery,如没有引入jQuery则需要自己用原生的JS实现。

    下面是我实现的一个参考:

    function handleOption(select,keyWord){
        if(isIE()){
            var children = select.children;
            for(var i = 0; i < children.length; i++){
                var nodeNow = children[i];
                if (nodeNow.nodeName == "OPTION"){
                    if(nodeNow.text.search(keyWord) != -1){
                        //show matched.
                        nodeNow.hidden = false;
                        }else{
                            //hide not matched.
                            nodeNow.hidden = true;
                            var nodeNowBak = nodeNow.cloneNode(true);
                            var span = document.createElement ("span");
                            span.style.display = "none";
                            span.appendChild(nodeNowBak);
                            nodeNow.parentNode.replaceChild(span,nodeNow);
                        }
                    }else if(nodeNow.nodeName == "SPAN"){
                        //you can use nodeNow.children[0] boldly, because the span node is created by me, so the span must has one option.
                        var nodeOption = nodeNow.children[0];
                        if(nodeOption.text.search(keyWord) != -1){
                            //show matched.
                            nodeOption.hidden = false;
                            var optionBak = nodeOption.cloneNode(true);
                            nodeNow.parentNode.replaceChild(optionBak,nodeNow);
                        }else{
                            //hide not matched.
                            nodeOption.hidden = true;
                            //this nodeOption's parentNode is span, the span's display value is none, so it's status is already hidden.
                        }
                    }
            }
        }else{
            var allOptions = select.options;
            //keyWord is not null
            if(keyWord){
                for(var i = 0; i < allOptions.length; i++){
                    var optionNow = allOptions[i];
                    if(optionNow.text.search(keyWord) != -1){
                        //show matched.
                        optionNow.hidden = false;
                    }else{
                        //hide not matched.
                        optionNow.hidden = true;
                    }
                }
            }else{
                //show all.
                for(var i = 0; i < select.options.length; i++){
                    var optionNow = allOptions[i];
                    optionNow.hidden = false;
                }
            }
        }
    }
    
    
    function isIE(){
        return (!!window.ActiveXObject) || ("ActiveXObject" in window);
    }

    这个方法对IE和Chrome都做了判断,其实对IE的方法对Chrome也可以用,但是性能上肯定要稍差于只修改hidden属性。

    展开全文
  • 对于不同月份我要显示不同的天数,但selectoption不能够使用display等方法...对select中option的操作(隐藏显示) <!-- //得到某年某月的天数 function DayNumOfMonth(Year,Month) { if(Year == ''){ var thed

    对于不同月份我要显示不同的天数,但select的option不能够使用display等方法进行隐藏,于是在网上查了查,整理了一下资料,写出了以下可以正常使用的代码。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>对select中option的操作(隐藏和显示)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="javascript">
    <!--
    //得到某年某月的天数
    function DayNumOfMonth(Year,Month)
    {
    if(Year == ''){
     var thedate = new Date();
     Year = thedate.getYear();
    }
    var d = new Date(Year,Month,0);
     return d.getDate();
    }
    //隐藏某个select中的option
    function hideone(theselect,index)
    {
    var oldOption = theselect.children(index);
    var oldStr = oldOption.innerText;
    var newOption = document.createElement('<div' + oldOption.outerHTML.match(/(<\w*)([^>]*)(>)/)[2] +'>');
    newOption.innerText = oldStr;
    newOption.swapNode(oldOption);
    }
    //显示隐藏的某个select中的option
    function showone(theselect,index)
    {
    var oldOption = theselect.children(index);
    if(oldOption.tagName=='DIV')
    {
     var oldStr = oldOption.innerText;
     var newOption = document.createElement('<option' + oldOption.outerHTML.match(/(<\w*)([^>]*)(>)/)[2] +'>');
     newOption.innerText = oldStr;
     newOption.swapNode(oldOption);
    }
    }
    //根据月份隐藏或显示option
    function checkdate(theselect1, theselect2){
    var themonth = theselect1.value;
    var themaxdate = DayNumOfMonth('',themonth);
    for(i=28; i<themaxdate; i++){
     showone(theselect2,i);
    }
    if (themaxdate != 31)
    {
     for(i=themaxdate; i<31; i++){
     hideone(theselect2,i);
     }
    }
    }
    //-->
    </script>
    </head>
    <body>
    <form name="theForm" method="post" style="text-align: center">
    <select οnchange="checkdate(theForm.Start1,theForm.Start2)" name="Start1">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    </select> 月 
    <select name="Start2">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    </select> 号 
    </form>
    <script language="javascript">
    <!--
    //预设默认的月份的天数
    checkdate(theForm.Start1,theForm.Start2);
    //-->
    </script>
    </body>
    </html>
    </select> 号 
    </form>
    <script language="javascript">
    <!--
    //预设默认的月份的天数
    checkdate(theForm.Start1,theForm.Start2);
    //-->
    </script>
    </body>
    </html>
    展开全文
  • select-option隐藏与显示

    千次阅读 2015-07-14 16:22:31
    if(per_categories == 'MK-...).children('option[value="DRF-050025000000001"]').wrap('').hide(); } else{ $("#job_title").children("span").children('option[v...
    if(per_categories == 'MK-0000007000000001')
    
    {
    $("#job_title").children('option[value="DRF-050025000000001"]').wrap('<span>').hide();
    }
    else{
    $("#job_title").children("span").children('option[value="DRF-050025000000001"]').unwrap();
    }
    展开全文
  • select option 显示隐藏

    千次阅读 2017-11-17 13:15:27
    <!... ... ... <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> ... //$('#s2 option[value="s2_6"]').hide();... <option value="s2_10" id="s2_10">10</option>  </select>  
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>New Web Project</title>
            <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
            <script type="text/javascript">
             $(function(){
              show();
             });
             
             /* */
             function show(){
              var s1 = $('#s1').val();
              if(s1 == 's1_2'){
               //$('#s2 option[value="s2_6"]').hide();
               //$('#s2 option[value="s2_7"]').hide();
               //$('#s2 option[value="s2_8"]').hide();
               //$('#s2 option[value="s2_9"]').hide();
               //$('#s2 option[value="s2_10"]').hide();
               
               //$('#s2_6').hide();
               //$('#s2_7').hide();
               //$('#s2_8').hide();
               //$('#s2_9').hide();
               //$('#s2_10').hide();
               
               //$('#s2_6').css("display", "none");
               //$('#s2_7').css("display", "none");
               //$('#s2_8').css("display", "none");
               //$('#s2_9').css("display", "none");
               //$('#s2_10').css("display", "none");
               
               
            $("#s2").children('option[value="s2_6"]').wrap('<span>').hide();
            $("#s2").children('option[value="s2_7"]').wrap('<span>').hide(); 
            $("#s2").children('option[value="s2_8"]').wrap('<span>').hide(); 
            $("#s2").children('option[value="s2_9"]').wrap('<span>').hide(); 
            $("#s2").children('option[value="s2_10"]').wrap('<span>').hide(); 
               
               
               //document.getElementById('s2_6').style.display = "none";
               //document.getElementById('s2_7').style.display = "none";
               //document.getElementById('s2_8').style.display = "none";
               //document.getElementById('s2_9').style.display = "none";
               //document.getElementById('s2_10').style.display = "none";
              }else{
               //$('#s2 option[value="s2_6"]').show();
               //$('#s2 option[value="s2_7"]').show();
               //$('#s2 option[value="s2_8"]').show();
               //$('#s2 option[value="s2_9"]').show();
               //$('#s2 option[value="s2_10"]').show();
               
               //$('#s2_6').show();
               //$('#s2_7').show();
               //$('#s2_8').show();
               //$('#s2_9').show();
               //$('#s2_10').show();
               
               //$('#s2_6').css("display", "");
               //$('#s2_7').css("display", "");
               //$('#s2_8').css("display", "");
               //$('#s2_9').css("display", "");
               //$('#s2_10').css("display", "");
               
               //document.getElementById('s2_6').style.display = "block";
               //document.getElementById('s2_7').style.display = "block";
               //document.getElementById('s2_8').style.display = "block";
               //document.getElementById('s2_9').style.display = "block";
               //document.getElementById('s2_10').style.display = "block";
               
               $("#s2").children("span").children('option[value="s2_6"]').unwrap();
               $("#s2").children("span").children('option[value="s2_7"]').unwrap();
               $("#s2").children("span").children('option[value="s2_8"]').unwrap();
               $("#s2").children("span").children('option[value="s2_9"]').unwrap();
               $("#s2").children("span").children('option[value="s2_10"]').unwrap();
               
               $('#s2 option[value="s2_6"]').show();
               $('#s2 option[value="s2_7"]').show();
               $('#s2 option[value="s2_8"]').show();
               $('#s2 option[value="s2_9"]').show();
               $('#s2 option[value="s2_10"]').show();
               
              }
             }
            </script>
        </head>
        <body>
            <h1>New Web Project Page</h1>
           
            <!-- -->
            <select id="s1" name="s1" οnchange="show()">
             <option value="s1_1">1</option>
             <option value="s1_2">2</option>
            </select>
            <select id="s2" name="s2">
             <option value="s2_1" id="s2_1">1</option>
             <option value="s2_2" id="s2_2">2</option>
             <option value="s2_3" id="s2_3">3</option>
             <option value="s2_4" id="s2_4">4</option>
             <option value="s2_5" id="s2_5">5</option>
             <option value="s2_6" id="s2_6">6</option>
             <option value="s2_7" id="s2_7">7</option>
             <option value="s2_8" id="s2_8">8</option>
             <option value="s2_9" id="s2_9">9</option>
             <option value="s2_10" id="s2_10">10</option>
            </select>
        </body>
    </html>
    展开全文
  • <!... <... <...select下拉选择框隐藏显示子项测试</title> <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet.
  • 兼容ie select option 显示隐藏

    千次阅读 2016-08-16 12:06:04
    一级分类  五险一金  企业服务  员工服务 二级分类 社会保险服务 公积金服务 ...//将option序列到数组var childselectAry = $("#childselect option.pid").map(function(){return $(this).conte
  •  在有些功能切换的时候,select标签的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。(ie浏览器中option不支持display:none;) 解决方案: <script> /*...
  • 隐藏显示selectoption标签

    千次阅读 2019-01-30 14:52:42
    首先是两种隐藏selectoption标签的方法: &lt;option value="hide" style='display:none'&gt;不需要&lt;/option&gt; $("select option[value='hide']").css('visibility',...
  • 开发过程无意遇到这个问题,解决问题第一时间就是百度。结果得到如下方法:1、首先设置option的display:none的方案肯定是不可行...如果想隐藏掉,只能把option从DOM树去除,然后对去除的option进行缓存,在要显示...
  • 恩,以前搜索问题的时候,在csdn博客这个大家庭收获甚多,鉴于写过的代码很快就会忘,放到...右侧的下拉框不会显示选择的,其后使用select来做(附上原先的代码) 点击超链接显示隐藏div $(docum
  • Select选中option显示隐藏

    千次阅读 2018-11-01 12:11:08
    select style="width:110px;" id="work_second_depts" onchange="show(this[selectedIndex].value)"&gt;  &lt;option value="quanyuan"&gt;全院&lt;/...
  • layui,hide,show是无法使用的,form.render(‘select’)的时候,select中display=none已经添加上去。但是渲染的时候,显示是用dl+div渲染显示的。 不起作用,没用,hide后,前台依旧显示。也不想通过ajax请求...
  • 移动端苹果IOS中selectoption值不显示问题解决 遇到一个问题就是最原始的select标签在安卓手机上显示正常,但是在IOS苹果高版本上点击select,在页面上有占位,随便点击也可以将值选在文本框,但是内容不显示,...
  • select中option选项过长隐藏

    千次阅读 2019-08-07 10:58:01
    在antd的select组件开发遇到一个问题,就是如果option内容过长他们会被...替代,这时就会看不到完成内容, 下面是问题和解决方法截图以及代码,当鼠标停留在option上时显示完整信息: ps:这里用到了html的title...
  • @visible-change=‘getGiftListTable’ 需要写到select标签 <el-select v-model="model.giftIds" value-key="giftId" placeholder="礼物特效" multiple @visible-change='getGiftListTable'> <el-option...
  • jquery/js动态控制select 里面的option显示隐藏 业务需求,动态展示下拉框里面的option,已经选择过的就不再显示。 解决方法:遍历option,对想要隐藏的添加 display:none 完美解决,用的是chrome哦!其他浏览器...
  • select 下拉框的值有时候如果文字过长会是的select 下拉框被拉长,所以需要控制select下的option文字的显示,实现当文字过长时用省略号代替超出部分的文字,鼠标移上去会显示实际的值 $(document).ready(function ...
  • 跨平台切换(显示/隐藏)选择>选项元素 示例代码位于 简单的API $ ( 'select' ) . selectOption ( ) ; $ ( 'select' ) . hideAllOption ( ) ; $ ( 'select' ) . showAllOption ( ) ; $ ( 'select' ) . ...
  • selectoption不能隐藏的问题。

    千次阅读 2019-01-15 16:23:35
    //将select通过clone方法保存 var select= $("#select").clone();...//查找出需要显示option并复制 var options = select.find("option[value=1]").clone();   //将需...
  • 开发过程无意遇到这个问题,解决问题第一时间就是百度。结果得到如下方法: 1、首先设置option的display:none的方案肯定是不可行了;2、某网友提出的两种方案:a.在option标签上面加上disabled="disabled"属性,...
  • 主要介绍了vue实现select下拉显示隐藏功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • JS代码: window.onload= function(){ var typeValue = document.getElementById("selectType").innerHTML; document.getElementById("select_type").selectedIndex = typeValue; } 服务器的返
  • ABAP 隐藏SELECT-OPTION定义的屏幕对象

    千次阅读 2018-10-26 11:21:51
    当我们想要执行对屏幕对象的操作的时候,一般第一想法就是用LOOP AT SCREEN,但是对于SELECT-OPTION创建的对象,在取SCREEN-NAME字段的时候会有一些问题, 比如我想要取S_YCINO这个字段,但是因为SELECT-OPTION定义...
  • $(this).mouseleave(function (e) { var o = e.relatedTarget || e.toElement;//判断下移动到的对象,移动到option上ie下是null,firefox等为undefined。...//为option退出不隐藏 $(this).hide(); });
  • 根据接口给的数据判断是隐藏还是显示 <select name="questiontype" lay-verify="" data-role="questiontypelist" lay-filter ='Tsquestiontype'> <option value="">题型</opti...
  • 开始的时候需求是根据一定条件隐藏一部分<option>标签,类似联动效果,但是目前的html规范并没有为<option>提供隐藏的效果,因此常用的设置display或者visibility无效。
  • 1.html:selectoption值,abc为property document.all.abc.options[document.all.abc.selectIndex].value ...3.jquery根据id隐藏显示标签 $("#abc").show(); $("#abc").hide...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,456
精华内容 16,182
关键字:

select中option隐藏与显示