style.display = "none" не работает в IE, но работает в другом браузере

Question

У меня выпадающий список.если я выберу значение параметра в раскрывающемся списке, этот параметр должен быть скрыт в результате.Я приложил свой кусок кода для справки.Это нормально работает в crome, но не работает в IE-10.предложить в JavaScript это было бы полезно.

Я также пробовал свойство видимости.но тоже не работает.

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>

Answer 1

Это своего рода другой способ

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

Answer 2

Если вы хотите скрыть только изменения, еще одно изменение, если вы снова данные.

Вы можете попробовать это.

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

Answer 3

Когда дело доходит до оформления элементов формы, разные браузеры имеют разные уровни поддержки.Поскольку IE больше не разрабатывается, а последние обновления были много лет назад, вы обнаружите поведение, которое там просто не работает и никогда не будет.

Теперь ваш код работает в браузерахкоторый поддерживает стиль option такого рода, он просто всегда устанавливает второй элемент option, который будет скрыт, потому что вы жестко кодируете 1 в качестве индекса.Вместо этого установите .selectedIndex из select, чтобы он не был виден, чтобы вы всегда получали индекс того, что option выбрано в данный момент.И это будет скрывать последний выбранный параметр от показа при последующем отображении списка, однако select все равно будет показывать это значение, поэтому вам также придется удалить его.

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>