javascript - 选择多个具有动态更新选项的选项在 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);  

  }});