Select multiple with dynamically updated options not working on Safari - iphone

Question

I`ve created a code that allows user to choose a city in a select box "City", then a second select box "Area" will be filtered and show only areas within that city, so the user can select multiple areas within one city. The select box "Area" allows multiple selection. So this code works on Firefox, Chrome but not on Iphone (Safari) where all areas of all cities are shown (not filtered):

$('#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 - "City" select box
• property_area_submit9 - "Area" select box (for multiple selection), its options have attribute data-parentcity - the name of the city an area belongs to.

I don't understand, the css() method does not work on Safari? Appreciate all your help.

Answer 1

Hey I think I found a solution for my problem. Following this article https://stackoverflow.com/a/15025961/6822695 , no possibility to play with css method with iphone, so I changed the code by using append() and remove(). The code is following :

 $('#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);  

  }});