В проекте, над которым я работаю, у меня есть 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, не похоже, это решено еще ....