Второй вариант выбора списка на основе результатов в раскрывающемся списке FIRST (должен работать в IE)

Question

У меня есть выбор HTML со списком параметров (на самом деле вытащил из таблицы SQL, но это не имеет значения здесь).

HTML (первый выбор)

<select id="groups" ......>
<option value="A" >Workday A </option>
<option value="B" >Workday B</option>
<option value="AA" >Weekend AA</option>
<option value="BB" >Weekend BB</option>

Теперь - на основании результатов первого, если пользователь выбирает A или B, ему должно быть разрешено только выбрать часы 1,2,3,4 в следующем раскрывающемся списке, если они выбирают AA или BB, они могут выбрать 1,2,3,4,5,6,7,8,9,10

Представьте, что это используется для заявления о сверхурочной работе - вы можете потребовать до 4 часов в рабочий день или до 10 в выходные. Поскольку я не хочу, чтобы люди могли требовать более 4 в раскрывающемся списке, если они выбрали Рабочий день A или B I, они нужны только для отображения действительных результатов.

<select id="sub_groups" ......>
<option value="1.0">1 hr</option>
<option value="2.0">2 hrs</option>
<option value="3.0">3 hrs</option>
<option value="4.0">4 hrs</option>
<option value="5.0">5 hrs</option>
<option value="6.0">6 hrs</option>
<option value="7.0">7 hrs</option>
<option value="8.0">8 hrs</option>
<option value="9.0">9 hrs</option>
<option value="10.0">10 hrs</option>

Я нашел скрипт, который отлично работает в FFX, но не в IE

   <script type="text/javascript">
       $(function(){
        $('body').on('change','#groups', function(){
            var val = $(this).val();
            var sub = $('#sub_groups');
            $('option', sub).filter(function(){
                if (
                     $(this).attr('data-group') === val 
                  || $(this).attr('data-group') === 'SHOW'
                ) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
        $('#groups').trigger('change');
    });

<option data-group="SHOW" value="0.5">0 hr 30 mins</option>
<option data-group="SHOW" selected="selected" value="1.0">1 hr</option>
<option data-group="SHOW" value="1.5">1 hr 30 mins</option>
<option data-group="SHOW" value="2.0">2 hrs</option>
<option data-group="SHOW" value="2.5">2 hrs 30 mins</option>        
<option data-group="SHOW" value="3.0">3 hrs</option>
<option data-group="SHOW" value="3.5">3 hrs 30 mins</option>        
<option data-group="SHOW" value="4.0">4 hrs</option>

<option data-group="AA" value="4.5">4 hrs 30 mins</option>
<option data-group="AA" value="5.0">5 hrs</option>
<option data-group="AA" value="5.5">5 hrs 30 mins</option>
<option data-group="AA" value="6.0">6 hrs</option>
<option data-group="AA" value="6.5">6 hrs 30 mins</option>      
<option data-group="AA" value="7.0">7 hrs</option>
<option data-group="AA" value="7.5">7 hrs 30 mins</option>      
<option data-group="AA" value="8.0">8 hrs</option>  
<option data-group="AA" value="8.5">8 hrs 30 mins</option>      
<option data-group="AA" value="9.0">9 hrs</option>
<option data-group="AA" value="9.5">9 hrs 30 mins</option>      
<option data-group="AA" value="10.0">10 hrs</option>


<option data-group="BB" value="4.5">4 hrs 30 mins</option>
<option data-group="BB" value="5.0">5 hrs</option>
<option data-group="BB" value="5.5">5 hrs 30 mins</option>
<option data-group="BB" value="6.0">6 hrs</option>
<option data-group="BB" value="6.5">6 hrs 30 mins</option>      
<option data-group="BB" value="7.0">7 hrs</option>
<option data-group="BB" value="7.5">7 hrs 30 mins</option>      
<option data-group="BB" value="8.0">8 hrs</option>  
<option data-group="BB" value="8.5">8 hrs 30 mins</option>      
<option data-group="BB" value="9.0">9 hrs</option>
<option data-group="BB" value="9.5">9 hrs 30 mins</option>      
<option data-group="BB" value="10.0">10 hrs</option>    

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

Есть идеи? Может ли быть так, как я читал в другом месте, что IE не поддерживает "скрыть", и мне нужно изменить JS на что-то другое?

Answer 1

ОК Нашел ответ от друга с копанием. При этом будет отображено второе выпадающее меню SELECT после выбора первого, а затем будет отображаться третье в зависимости от результата второго. Мне нужны только первые два, так что это немного исправлено, но оно работает в IE и FFX

Jquery, чтобы изменить второй выбор на основе параметров первого