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