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

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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
      }

Answer 4

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 :(

Answer 5

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>

Answer 6

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.