.show() метод не работает иногда в google chrome, пока он отлично работает в firefox

Question

У меня есть следующий массив, который состоит из категории и подкатегории.

 $event_category = array(
     'Entertainment' => array('Music/Concerts', 'Theatre and Arts', 'Dance and Yoga', 'Night life and Parties', 'Food and Dining', 'Festivals', 'Kids Events', 'Awards', 'Others'), 
     'Sports' => array('Adventure', 'Cricket', 'Cycling', 'Fitness', 'Marathon', 'Others'), 
     'Exhibhitions Fairs' => array('Technology', 'Education', 'Real Estate', 'Travel, Tourism, leisure', 'Trade Fairs', 'Others'), 
     'College Events' => array('College Fest', 'Alumni Meet', 'Summer Camps', 'Others'), 
     'Corporate' => array('Conferences', 'Seminars', 'Others'), 
     'Competitions' => array(), 
     'Awards' => array(), 
     'Not for profit' => array(), 
     'Other' => array(), 
    ); 

Теперь я заполняю вышеуказанный массив как категорию и подкатегорию.

<select style="color:#999;" name="category" id="category"> 
      <option value="0"> Select </option> 
     <?php foreach ($event_category as $key => $val) { ?> 
      <option value="<?php echo $key; ?>" style="color:#585858;"><?php echo $key; ?></option> 
     <?php } 
     ?> 
    </select> 


    <select style="color:#999;" name="subcategory" id="subcategory"> 
    <option style="color:#999;" class="axyzb" value="0"> Select </option> 
     <?php 
     foreach ($event_category as $key => $val) { 
     foreach ($val as $value) { ?> 
     <option style="display: none;color:#999;" class="<?php echo str_replace(' ', '_', $key); ?>" value="<?php echo $value ?>"><?php echo $value ?></option> 
     <?php 
     } 
     } 
    ?> 
    </select> 

Первоначально все подкатегории являются дисплеями: ни один, кроме одного. вся подкатегория имеет класс, который является его основной категорией. Теперь, когда я изменить категорию Я скрыть все подкатегории, взять значение выбранного категории и шоу() подкатегорий, чей класс значение, которое я получил от категории, как этот

 $('#category').change(function() { 
       $("#subcategory").children('option').hide(); 
       var cate = document.getElementById('category').value; 
       cate = cate.split(' ').join('_'); 
       if (cate != '') { 
        $('.' + cate).show(); 
        $('.axyzb').show(); 
       } 

      }) 

В основном я хочу, чтобы показать подкатегории в соответствии с выбранной категорией. Над кодом работает отлично для меня в firefox, но в chrome он не работает для двух категорий. Когда я проверяю консоль на начальном экране: ни один из них не удаляется из html, но все же эти подкатегории не отображаются на страница.

Answer 1

Вы не можете отображать и скрывать элементы <option>, они не поддерживаются во всех браузерах, вы должны их удалить и снова вставить.

Chrome и IE имеют проблемы со скрытыми опциями, и странно, что он будет работать с перерывами, поскольку он, вероятно, не должен работать вообще.