style.display='none' doesn't work on o

2019-01-01 13:24发布

站内文章 / JavaScript
37 0 0

问题:

ok, heres some sample code that demonstrates the problem. if i click the button in firefox, the first option disappears. if i click the button in chrome, nothing happens, or rather if i inspect the first option, it does have the attribute \"style=\'display:none\'\" but the option itself on the html page is not hidden.

<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type=\"button\" onclick=\"document.getElementsByTagName(\'option\')[0].style.display=\'none\'\" value=\"hide option 1\">
</form>

why doesn\'t this work in chrome?

回答1:

The workaround is to remove the option elements in response to your event and add them back if and when they are needed. IIRC, IE will not allow you to set the display to none on option elements. I would advise storing the removed elements in an array so that you can easily add them back in.



回答2:

You probably have to remove the <option> instead of \'hiding\' it. If it\'s not a solution for you, try disabling it.

document.getElementsByTagName(\'option\')[0].disabled=\'disabled\'

PS: You might want to reconsider using getElementsByTagName(\'option\'), can get messy if you have more <select> elements.



回答3:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
<script>
removeIt = function()
{
    var theSelect = document.getElementById(\"theSelect\");
    var theOption = document.getElementById(\"theOption\");
    theSelect.removeChild(theOption);
};
</script>
</head>
<body>
<select id=\"theSelect\">
<option>1</option>
<option id=\"theOption\">2</option>
<option>3</option>
</select>
<input type=\"button\" onclick=\"removeIt()\" value=\"remove it!\"/>
</body>
</html>

I quickly got it working by simply removing it from its parentNode... obviously this is going to be a hack.
I\'ll try to find a better solution for you =)

By the way, welcome to Stack Overflow



回答4:

The question is rather why that works in any browser at all?

The options are not used as elements in the page, they contain the information to show in the select element. Some browsers let you apply some styles to the options, but generally you can\'t really expect cross browser support for any styles at all.

If you want to keep an option from being displayed, you just have to remove it from the select.



回答5:

As my solution (asp.net) .I try to do by that way. 1.Create a dropdowlist will all ListItems 2.Using javscript to add or remove ListItems (Note: add option need same value and text in asp:dropdowlist items)

function removeOptionSelected()
{
  var ddl = document.getElementById(\'ddl_DropList\');
  var i;
  for (i = ddl.length - 1; i>=0; i--) {

      ddl.remove(i);
  }
}
function addOptions3()
{
     removeOptionSelected();
     var ddl = document.getElementById(\'ddl_DropList\');
    var elOptNew = document.createElement(\'option\');

    elOptNew.text = \'Monthly Top Producer(Project)\';
    elOptNew.value = \'GCE\';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn\'t work in IE
      }
      catch(ex) {
        ddl.add(elOptNew); // IE only
      }
    elOptNew = document.createElement(\'option\');
    elOptNew.text = \'Monthly Top Leaders - DD\';
    elOptNew.value = \'DRE\';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn\'t work in IE
      }
      catch(ex) {
        ddl.add(elOptNew); // IE only
      }
    elOptNew = document.createElement(\'option\');
    elOptNew.text = \'Monthly Top Leaders - SDD\';
    elOptNew.value = \'DRESDD\';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn\'t work in IE
      }
      catch(ex) {
        ddl.add(elOptNew); // IE only
      }
    elOptNew = document.createElement(\'option\');
    elOptNew.text = \'Monthly Top Leaders - GD\';
    elOptNew.value = \'GRE\';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn\'t work in IE
      }
      catch(ex) {
        ddl.add(elOptNew); // IE only
      }


回答6:

For deleting of one option from select form may be used jQuery\'s $().eq().remove() or $().remove().

Similar was my deleting of one table row from table:

$(\'form table tr\').eq(1).remove();

where:

$(\'form table tr\')

say that removed element will be table row (tr) from table enclosed in form (form table).

eq(1)

say that removed will be the second element (element with index number 1)

remove()

say that element will be removed.

But when this should be used on option, then all needed would be (for example):

$(\'select option[value=\"1\"]\').remove();

because it is simplier to find option by value than by index number (unless you would have more ioption with the same value - but it is nonsense, to have such options). Using of index number is good if you have not any else that you may use to find removed element.

Also you may, of course, add form name or form name and select name (or id, or class) into element identification

$(\'form[name=\"date\"] selection[name=\"day\"] option[value=\"1\"]\').remove();
$(\'form#date selection#day option[value=\"1\"]\').remove();

but the first option is better - and more logical, due to server-side processes, where you need to use attribute name instead id or class.



回答7:

I know this is now old, but you could - especially if you are using jQuery change parent.

<!DOCTYPE html>
<html>
    <head>
        <meta charset=\"UTF-8\">
        <title>Demo Page</title>
        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> 
        <script src=\"//code.jquery.com/jquery-1.11.0.min.js\"></script>
        <script>

            function sourceListChange() {
                var oVisible = $(\'#destList\');
                var newCategory = $( \"#sourceList\" ).val()||\'\';
                var oToShow = $();

                oHiddenDestList.append(oVisible.find(\'option\'));

                if (newCategory) {
                    oToShow = oHiddenDestList.find(\'.\'+newCategory);
                }           

                if (oToShow.length==0) {
                    oVisible.append (oHiddenDestList.find(\'.NA\'));
                } else if (oToShow.length!=1) {
                    oVisible.append (oHiddenDestList.find(\'.SELECT\'));
                }
                oVisible.prop(\'selectedIndex\', 0);

                oVisible.append (oToShow);
            }

            $(document).ready(function() {
                sourceListChange();
            });

            var oHiddenDestList = $(document.createElement(\'select\'));

        </script>
        <style>

        </style>
    </head>

    <body>

        Select a parent group:
        <select id=\"sourceList\" onchange=\"sourceListChange()\">
            <option class=\"SELECT\" value=\"\" selected disabled>Please Select</option>
            <option value=\"veg\">Vegetables</option>
            <option value=\"fruit\">Fruit</option>
        </select>

        <select id=\"destList\">
            <option class=\"SELECT\" value=\"*\" selected disabled>Please Select</option>
            <option class=\"NA\" value=\"\" selected disabled>Not Applicable</option>
            <option class=\"fruit\">Apple</option>
            <option class=\"fruit\">Bannana</option>
            <option class=\"veg\">Carrot</option>
            <option class=\"veg\">Pea</option>
        </select>       
    </body>
</html>


回答8:

Solution:

var ua = navigator.userAgent.toLowerCase();

var check = function(r) { return r.test(ua);};

var isChrome = check(/chrome/);
`
var f=document.getElementById(\'select_tag_id\');

f.options[i].style.display=\'none\';

if (isChrome) f.size=2;

The select box changed to 2 size (like multiple), but working. This trick don\'t working under safari :(



标签： javascript firefox coding-style google-chrome
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~