Как скрыть optgroup в Safari? - PullRequest
       20

Как скрыть optgroup в Safari?

0 голосов
/ 22 апреля 2020

В проекте, над которым я работаю, у меня есть 2 выпадающих меню, state и area. Мне нужно изменить optgroup (которая в качестве опции) в area на основе значения state. Все, что я пробовал, всегда работает на Chrome & Firefox, но никогда на Safari.

То, что я пробовал, часть 1

Сначала я просто установил hidden атрибут true из optgroup в area на основе значения state в Javascript. Работал в Chrome & Firefox. Сафари?

То, что я пробовал, часть 2

Хорошо, на этот раз я установил атрибут disabled на true и в CSS установил отображение на нет для выбранных групп, которые отключены. Код ниже.

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>

Работает в Chrome & Firefox. Сафари?

Есть ли способ скрыть optgroup в Safari с простым JS без необходимости прибегать к jQuery или другим библиотекам?

Edit : Итак, я попытался сделать это с jQuery, и он все еще не работал в Safari, после просмотра Webkit Bugzilla кажется, что это ошибка https://bugs.webkit.org/show_bug.cgi?id=8351, не похоже, это решено еще ....

...