隐藏<optgroup>在 Safari/iphone 中不起作用</optgroup>

Question

我有一个脚本，根据用户的选择，它采用一组隐藏的 HTML 标签并将其插入容器 X 次。 然后，用户选择一个等级 - select标签的内容取决于该等级部分。 因此，如果学生在 1-8 年级，则显示 2 个optgroup ，并隐藏另外 2 个。 如果选择了 N 或 K 等级 - 2 个optgroups将互换。 这在 Chrome、Firefox、windows 机器上的 Edge 以及 Android 中完美运行。 但是在 Safari/iPhone 上， optgroup的隐藏/显示不起作用。 我已经在浏览器堆栈模拟器上验证了这一点（我没有要测试的 iPhone）。

这是供您审查的小提琴： https://jsfiddle.net/kneidels/mfu7ovzx/

And below is the relevant jQuery (v1.11) and Bootstrap (3.3) [yes, a little aged] - but have confirmed the same results using bootstrap 5, with jQuery 3.6: https://jsfiddle.net/kneidels/2u5rvfdb/

 $(document).ready(function(){
 
 // this hides/shows the optgroups based on the gtade selection in a given row.
 $("#kidrowarea").on("change", ".gradeoption", function(){
    var rowid = $(this).data("row");
    var gradeoption = $(this).val();
    
    
    $("select[name=placeholder][data-row="+rowid+"]").hide();
    $(".planselector[data-row="+rowid+"]").show();
    
    // just in case a selection was previously made - lets reset the plan drop down:
    $(".planselector[data-row="+rowid+"]").val('');
    
    if (gradeoption=='N' || gradeoption =='K') {
        
        //3,6 : hide 
        $(".planselector[data-row="+rowid+"] optgroup[data-groupid=3], .planselector[data-row="+rowid+"] optgroup[data-groupid=6]").hide();
        //2,4 : show
        $(".planselector[data-row="+rowid+"] optgroup[data-groupid=2], .planselector[data-row="+rowid+"] optgroup[data-groupid=4]").show();
        
    } else {
        //3,6 : show 
        $(".planselector[data-row="+rowid+"] optgroup[data-groupid=3], .planselector[data-row="+rowid+"] optgroup[data-groupid=6]").show();
        //2,4 : hide
        $(".planselector[data-row="+rowid+"] optgroup[data-groupid=2], .planselector[data-row="+rowid+"] optgroup[data-groupid=4]").hide();
    }

});
  
 
// this inserts the relevant base HTML into the container X times. 
$("#childcount").change(function(){
     var childcount = $("#childcount").val();
     var existingKidBlockCount = $("#kidrowarea .kidrow").length;
         
     var basehtml = $("#basehtml").html();
     var currenthtml = '';
                                  
        $("#kidrowarea").html('');
        for ( let kk = 1; kk <= childcount; kk++){
             currenthtml = basehtml;
             currenthtml = currenthtml.replace(/~/g,kk)
             $("#kidrowarea").append( currenthtml );
            
        }
 
 });
 
});