Question

我创建了一个代码，允许用户在选择框中选择一个城市＆＃34; City＆＃34;，然后是第二个选择框＆＃34; Area＆＃34;将被过滤并仅显示该城市内的区域，因此用户可以选择一个城市内的多个区域。选择框＆＃34;区域＆＃34;允许多种选择。因此，此代码适用于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 - ＆＃34; City＆＃34;选择框
property_area_submit9 - ＆＃34; Area＆＃34;选择框（用于多个选择），其选项具有属性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);  

  }});

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

1 个答案: