JavaScript: nascondere gli elementi option nei browser mobile

Nei browser mobile nascondere un elemento option richiede l'intervento di JavaScript.

I browser mobile non permettono di nascondere un elemento option usando l'attributo hidden. Esistono quindi due soluzioni in JavaScript per ovviare a questo problema.

La prima prevede la rimozione degli elementi, il filtraggio ed il ripristino.

'use strict';

const select = document.querySelector('#select');
const originalSelectHTML = select.innerHTML; // Per il ripristino

select.querySelectorAll('option').forEach(option => {
   if(option.value === 'B') {
       option.remove();
   }
});

La seconda consiste nel inserire le opzioni in altri elementi e quindi operare con i CSS sui loro genitori.

'use strict';

const select = document.querySelector('#select');

select.querySelectorAll('option').forEach(option => {
   let parent =  document.createElement('div'); 
   if(option.value === 'B') {
       option.parentNode.insertBefore(parent, option);
       parent.appendChild(option);
   }
});

Quindi con i CSS:

#select div {
    display: none;
}