选择多个动态更新的选项在 Safari 上不起作用 - iphone答案

【问题标题】：Select multiple with dynamically updated options not working on Safari - iphone选择多个动态更新的选项在 Safari 上不起作用 - iphone
【发布时间】：2016-09-12 14:03:12
【问题描述】：

我创建了一个代码，允许用户在选择框“城市”中选择一个城市，然后第二个选择框“区域”将被过滤并仅显示该城市内的区域，因此用户可以选择多个区域一城之内。选择框“区域”允许多选。因此，此代码适用于 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 上不起作用？感谢您的所有帮助。

【问题讨论】：

感谢 chimmi 的帮助。 :)

标签： javascript css iphone safari multiple-select

【解决方案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);  

  }});

【讨论】：