style.display = "none" is not working in IE but works in Other browser

Question

I have a dropdown. if I select option value in dropdown ,that option should be hidden as result. I attached my piece of code for reference. This working fine in crome but hiding not working in IE-10. suggest in JavaScript it would be helpful.

I have tried Visibility property also. but not working either.

function dropdown(dd) {
  document.getElementById('mySelect').options[1].style.display = "none";
}

<form>
  <select id="mySelect" onchange="dropdown(this)">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</form>

It is bit difficult to scroll and understand your code alignment — Punitha Subramani, Apr 02 '19 at 11:13
`document.getElementById('mySelect').options[1].setAttribute('hidden', "hidden");` will hide the second option for example — Jaromanda X, Apr 02 '19 at 11:20
Yep, Not even in Internet Explorer 11 - lets face it, IE is broken — Jaromanda X, Apr 02 '19 at 11:27

Scott Marcus · Answer 1 · 2019-04-02T11:49:14.683

0

When it comes to the styling of form elements, different browsers have different levels of support. Being that IE is no longer being developed, and that the last updates were years ago, you're going to find behaviors that just don't work there and never will.

Now, your code does work in browsers that support option styling of this kind, it just always sets the second option element to be hidden because you are hard-coding 1 as the index. Instead, set the .selectedIndex of the select to be not visible so that you always get the index of whatever option is currently selected. And, that will hide the last selected option from showing when the list is subsequently shown, however the select will still show that value so you also have to remove that.

document.getElementById("mySelect").addEventListener("change", dropdown);

function dropdown() {
  this.options[this.selectedIndex].style.visibility = "hidden"; // Hide on the list
  this.value = ""; // Hide the new value
}

<form>
  <select id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</form>

edited Apr 02 '19 at 11:49

answered Apr 02 '19 at 11:16

Scott Marcus

64,069
6
49
71

But why? You should also be able to explain why the OPs question is a valid one. – Krishna Prashatt Apr 02 '19 at 11:17
this does nothing different to the original code at all – Jaromanda X Apr 02 '19 at 11:19
hard coded because of understanding purpose.. but hiding is not working in IE – Vijay Bharadwaj Apr 02 '19 at 11:19
@JaromandaX You need to look at the OP's code and my code again then. – Scott Marcus Apr 02 '19 at 11:20
I mean in terms of hiding anything, it does not hide a thing **IN FIREFOX** – Jaromanda X Apr 02 '19 at 11:20
@JaromandaX Then you need to run my code again and look carefully because it does. – Scott Marcus Apr 02 '19 at 11:21
@VijayBharadwaj See updated answer. This does work in IE 11. – Scott Marcus Apr 02 '19 at 11:43

score 0 · Answer 2 · answered Apr 02 '19 at 11:30

0

Its kind of another way

<form>
  <select id="mySelect" onchange="dropdown(this)">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</form>

<script>
function dropdown(dd) {
  var a = document.getElementById('mySelect');
  a.remove(a.selectedIndex);
}
</script>

answered Apr 02 '19 at 11:30

Punitha Subramani

1,467
1
8
6

I just need to hide. not Removing the option – Vijay Bharadwaj Apr 02 '19 at 11:36
what's dd in function dropdown(dd)? – Vishwa Apr 02 '19 at 11:37
Vijay Bharadwai used this keyword, So I followed his code and modified what exact changes only #vishwa – Punitha Subramani Apr 02 '19 at 11:40
Vijay I posted the answer, Please check it is not like permanent remove. You can check and let me know whether this is your expectation – Punitha Subramani Apr 02 '19 at 12:13

score 0 · Answer 3 · answered Apr 02 '19 at 12:12

If you want to hide on change only, another on change if you again the data.

You can try it.

<form>
  <select id="mySelect" onchange="dropdown(this)">
    <option>--Select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</form>

<script>
var mySelect = [];
function dropdown(dd) {
  var mySelect1 = document.getElementById('mySelect');
  if(mySelect.text !== undefined && mySelect.index !== '') {
    mySelect1.options.add(new Option(mySelect.text, mySelect.index), mySelect1.options[mySelect.index]);
  }

  var selectedText = mySelect1.options[mySelect1.selectedIndex].text;

  mySelect.text = selectedText;
  mySelect.index = mySelect1.selectedIndex;
  mySelect1.remove(mySelect1.selectedIndex);
}
</script>

style.display = "none" is not working in IE but works in Other browser

3 Answers3