选择多个动态更新的选项不适用于Safari - iphone

Question

我创建了一个代码，允许用户在选择框“城市”中选择一个城市，然后第二个选择框“区域”将被过滤并仅显示该城市内的地区，因此用户可以在一个城市内选择多个地区。选择框“区域”允许多个选择。所以，此代码在Firefox，Chrome，但不是在iPhone（Safari浏览器），所有城市的所有领域都显示（未经过滤）：

$('#property_city_submit9').change(function(){ 

    var city = $(this).val(); 
    if(city !== 'all'){ 

    $('#property_area_submit9 option:selected').removeAttr("selected"); 
    $('#property_area_submit9 option').css('display', 'none'); 
    $('#property_area_submit9 option[data-parentcity="'+city+'"]').css('display', 'block'); 

    }else { 

    $('#property_area_submit9 option:selected').removeAttr("selected"); 
    $('#property_area_submit9 option').css('display', 'none'); 
    $('#property_area_submit9 option[value="all"]').css('display', 'block'); 
    } 
});  

• property_city_submit9 - “城市” 选择框中
• property_area_submit9 - “区域“选择框（用于多选），其选项具有属性data-parentcity - 区域所属城市的名称。

我不明白，css()方法不适用于Safari？感谢你的帮助。

Answer 1

嘿我想我找到了我的问题的解决方案。以下这篇文章https://stackoverflow.com/a/15025961/6822695，没有可能与iphone一起玩css方法，所以我使用append（）和remove（）更改了代码。代码如下：

$('#property_city_submit9').change(function(){ 

    var city = $(this).val(); 
    $('#property_area_submit9 option:selected').removeAttr("selected"); 
    $('#property_area_submit9').find('option').remove(); 
    var addopti ='<option data-parentcity="*" value="all"></option>'; 

    if(city !== 'all'){ 


    $('.area_stock_info li').each(function(){   

    if($(this).attr('data-city') == city){ 

     addopti +='<option value="'+$(this).attr('data-value')+'" data-parentcity="'+$(this).attr('data-city')+'">'+$(this).attr('data-value')+'</option>'; 

    }  
    }); 

    $('#property_area_submit9').append(addopti); 

    }});