How do I hide an optgroup in Safari? - html

Question

In a project I'm working on, I have 2 dropdown menus, state and area. I need to change the optgroup(which as options) in area based on the value of state. Whatever I've tried always works on Chrome & Firefox but never Safari.
What I tried, part 1
Initially, I just set the hidden attribute to true of the optgroup in area based on the value of state in Javascript. Worked in Chrome & Firefox. Safari? No.
What I tried, part 2
Alright, this time I set the disabled attribute to true and in CSS set the display to none for opt groups that are disabled. Code below.
const states_field = document.getElementById('state_search');
const areas_field = document.getElementById('areas_search');
states_field.addEventListener('change', filterArea);
function filterArea() {
console.log('working');
// 1. get the state selected by user
const selectedState = states_field.value;
console.log(selectedState);
// 2. go through all the states within the areas field
const areasStates = areas_field.getElementsByTagName('optgroup');
for (let i = 0; i < areasStates.length; i++) {
const areaState = areasStates[i];
console.log(areaState);
// 3. check if the selected state equals to any states in the areas field
if (selectedState != areaState.attributes.label.value) {
console.log(selectedState === areaState.attributes.label.value);
// 4. if not equal, set the optgroup hidden property to true
areaState.disabled = true;
console.log(areaState.disabled);
} else {
// 5. if equal, unhide
areaState.disabled = false;
console.log(areaState.disabled);
}
}
}
optgroup:disabled {
display: none;
}
h4 {
display: inline-block;
}
<h4>State</h4>
<select name="state_search" id="state_search">
<option value=""></option>
<option value="Johor">Johor</option>
<option value="Kedah">Kedah</option>
<option value="Kelantan">Kelantan</option>
<option value="Kuala Lumpur">Kuala Lumpur</option>
<option value="Labuan">Labuan</option>
<option value="Melaka">Melaka</option>
<option value="Negeri Sembilan">Negeri Sembilan</option>
<option value="Pahang">Pahang</option>
<option value="Penang">Penang</option>
<option value="Perak">Perak</option>
<option value="Perlis">Perlis</option>
<option value="Sabah">Sabah</option>
<option value="Sarawak">Sarawak</option>
<option value="Selangor">Selangor</option>
<option value="Terengganu">Terengganu</option>
</select>
<h4>Area</h4>
<select name="areas_search" id="areas_search">
<option value=""></option>
<optgroup label="Johor">
<option value="12">Batu Pahat</option>
<option value="13">Johor Bahru</option>
<option value="14">Kluang</option>
<option value="15">Kota Tinggi</option>
<option value="16">Kulai</option>
<option value="17">Mersing</option>
<option value="18">Muar</option>
<option value="19">Pontian</option>
<option value="20">Segamat</option>
<option value="21">Tangkak</option>
</optgroup>
<optgroup label="Kedah">
<option value="22">Baling</option>
<option value="23">Bandar Baharu</option>
<option value="24">Kota Setar</option>
<option value="25">Kuala Muda</option>
<option value="26">Kubang Pasu</option>
<option value="27">Kulim</option>
<option value="28">Langkawi</option>
<option value="29">Padang Terap</option>
<option value="30">Pendang</option>
<option value="31">Pokok Sena</option>
<option value="32">Sik</option>
<option value="33">Yan</option>
</optgroup>
<optgroup label="Kelantan">
<option value="34">Bachok</option>
<option value="35">Gua Musang</option>
<option value="36">Jeli</option>
<option value="37">Kota Bharu</option>
<option value="38">Kuala Krai</option>
<option value="39">Machang</option>
<option value="40">Pasir Mas</option>
<option value="41">Pasir Puteh</option>
<option value="42">Tanah Merah</option>
<option value="43">Tumpat</option>
</optgroup>
<optgroup label="Kuala Lumpur">
<option value="1">Kepong</option>
<option value="2">Segambut</option>
<option value="3">Batu</option>
<option value="4">Wangsa Maju</option>
<option value="5">Setiawangsa</option>
<option value="6">Titiwangsa</option>
<option value="7">Bukit Bintang</option>
<option value="8">Lembah Pantai</option>
<option value="9">Seputeh</option>
<option value="10">Cheras</option>
<option value="11">Bandar Tun Razak</option>
</optgroup>
<optgroup label="Labuan">
<option value="102">Victoria</option>
</optgroup>
<optgroup label="Melaka">
<option value="44">Alor Gajah</option>
<option value="45">Central Melaka</option>
<option value="46">Jasin</option>
</optgroup>
<optgroup label="Negeri Sembilan">
<option value="47">Jelebu</option>
<option value="48">Jempol</option>
<option value="49">Kuala Pilah</option>
<option value="50">Port Dickson</option>
<option value="51">Rembau</option>
<option value="52">Seremban</option>
<option value="53">Tampin</option>
</optgroup>
<optgroup label="Pahang">
<option value="54">Bentong</option>
<option value="55">Bera</option>
<option value="56">Cameron Highlands</option>
<option value="57">Jerantut</option>
<option value="58">Kuantan</option>
<option value="59">Lipis</option>
<option value="60">Maran</option>
<option value="61">Pekan</option>
<option value="62">Raub</option>
<option value="63">Rompin</option>
<option value="64">Temerloh</option>
</optgroup>
<optgroup label="Penang">
<option value="65">Central Seberang Perai</option>
<option value="66">North Seberang Perai</option>
<option value="67">South Seberang Perai</option>
<option value="68">Northeast Penang Island</option>
<option value="69">Southwest Penang Island</option>
</optgroup>
<optgroup label="Perak">
<option value="70">Bagan Datuk</option>
<option value="71">Batang Padang</option>
<option value="72">Hilir Perak</option>
<option value="73">Hulu Perak</option>
<option value="74">Kampar</option>
<option value="75">Kerian</option>
<option value="76">Kinta</option>
<option value="77">Kuala Kangsar</option>
<option value="78">Larut</option>
<option value="79">Matang</option>
<option value="80">Selama</option>
<option value="81">Manjung</option>
<option value="82">Muallim</option>
<option value="83">Perak Tengah</option>
</optgroup>
<optgroup label="Perlis">
<option value="84">Kangar</option>
</optgroup>
<optgroup label="Sabah">
<option value="103">Beaufort</option>
<option value="104">Beluran</option>
<option value="105">Keningau</option>
<option value="106">Kota Belud</option>
<option value="107">Kinabatangan</option>
<option value="108">Kota Kinabalu</option>
<option value="109">Kota Marudu</option>
<option value="110">Kota Penyu</option>
<option value="111">Kudat</option>
<option value="112">Kunak</option>
<option value="113">Lahad Datu</option>
<option value="114">Nabawan</option>
<option value="115">Papar</option>
<option value="116">Penampang</option>
<option value="117">Putatan</option>
<option value="118">Pitas</option>
<option value="119">Ranau</option>
<option value="120">Sandakan</option>
<option value="121">Semporna</option>
<option value="122">Sipitang</option>
<option value="123">Tambunan</option>
<option value="124">Tawau</option>
<option value="125">Telupid</option>
<option value="126">Tenom</option>
<option value="127">Tongod</option>
<option value="128">Tuaran</option>
</optgroup>
<optgroup label="Sarawak">
<option value="129">Betong</option>
<option value="130">Bintulu</option>
<option value="131">Kapit</option>
<option value="132">Kuching</option>
<option value="133">Limbang</option>
<option value="134">Miri</option>
<option value="135">Mukah</option>
<option value="136">Samarahan</option>
<option value="137">Sarikei</option>
<option value="138">Serian</option>
<option value="139">Sibu</option>
<option value="140">Sri Aman</option>
</optgroup>
<optgroup label="Selangor">
<option value="85">Gombak</option>
<option value="86">Hulu Langat</option>
<option value="87">Hulu Selangor</option>
<option value="88">Klang</option>
<option value="89">Kuala Langat</option>
<option value="90">Kuala Selangor</option>
<option value="91">Petaling</option>
<option value="92">Sabak Bernam</option>
<option value="93">Sepang</option>
</optgroup>
<optgroup label="Terengganu">
<option value="94">Besut</option>
<option value="95">Dungun</option>
<option value="96">Hulu Terengganu</option>
<option value="97">Kemaman</option>
<option value="98">Kuala Nerus</option>
<option value="99">Kuala Terengganu</option>
<option value="100">Marang</option>
<option value="101">Setiu</option>
</optgroup>
</select>
Works in Chrome & Firefox. Safari? No.
Is there any way to hide an optgroup in Safari with plain JS without having to resort to jQuery or other libraries?
Edit: So I tried to do this with jQuery and it still didn't work on Safari, after looking around on Webkit Bugzilla it seems that it's a bug
https://bugs.webkit.org/show_bug.cgi?id=8351 , doesn't look like it's solved yet....