jQuery : Not support in Iphone Device issue

Question

I have below HTML code

$(document).on('change', '#region_id', function() {
  var region = $('.region_id option:selected').text();
  $('select[name="city_dropdown"]').children('option').hide();
  $('select[name="city_dropdown"]').children('option[value="' + region + '"]').show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="region_id" id="region_id" name="region_id">
  <option value="668">region1</option>
  <option value="669">region2</option>
</select>

<select id="city_dropdown" name="city_dropdown">
  <option value="">select</option>
  <option value="region1">City1</option>                                                    
  <option value="region2">City2</option>
</select>

.hide() and .show() is not working in iPhone devices but working fine on the web.

Can anyone guide me on this.

score 1 · Answer 1 · answered Dec 03 '20 at 08:02

Visit Here! option.style.display = "none" not working in safari

You can't toggle display on elements in Safari (or IE, for that matter). This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS (no point trying to find a rationale for IE's failings). Your only options are either to remove it (and re-append it later), or to set it to optnz.disabled = true. Sorry for the bad news!

Try it!

$(document).on('change', '#region_id', function() {
  var region = $('.region_id option:selected').text();
  let selBoxOptions = Array.from(document.getElementById('city_dropdown').children);
  selBoxOptions.forEach(element => {
    if (element.value != region) {
      element.disabled = true;
    } else {
        element.disabled = false;
    }
        
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="region_id" id="region_id" name="region_id">
  <option value="668">region1</option>
  <option value="669">region2</option>
</select>

<select id="city_dropdown" name="city_dropdown">
  <option value="">select</option>
  <option value="region1">City1</option>                                                    
  <option value="region2">City2</option>
</select>

Yes upvote Its working in Iphone but I am looking for hide and show related functionality not disabled — Tirth Patel, Dec 03 '20 at 08:59
then try it. create a city object that corresponds to the region and apply the object when selecting the region. — Hyunjune Kim, Dec 04 '20 at 00:11

score 0 · Answer 2 · answered Dec 04 '20 at 00:19

region1 = ['city1', 'city2', 'city3'];
region2 = ['city4', 'city5', 'city6'];

$(document).on('change', '#region_id', function() {
  var region = $('.region_id option:selected').text();
        $('#city_dropdown').children().remove();
  switch (region) {
    case 'region1':
      for (let city of region1) {
        $('#city_dropdown').append('<option value="' + city + '">' + city + '</option>');
      }
    break;
    case 'region2':
      for (let city of region2) {
        $('#city_dropdown').append('<option value="' + city + '">' + city + '</option>');
      }
    break;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="region_id" id="region_id" name="region_id">
  <option value="668">region1</option>
  <option value="669">region2</option>
</select>

<select id="city_dropdown" name="city_dropdown">
  <option value="">select</option>
  <option value="region1">City1</option>                                                    
  <option value="region2">City2</option>
</select>

try like this.

jQuery : Not support in Iphone Device issue

2 Answers2