how to get select option to hide on IOS

byMR

April 2, 2022

I have 2 select boxes , both with same items and values , each assigned unique ID

When i select an item from one select option box , i want to hide the same item in the other select box.

This works fine on desktop , but IOS , i can not get the option to hide

Setup a fiddle here – https://jsfiddle.net/m359c4sv/1/

<select id="one">
    <option value="0001">item 1</option>
    <option value="0002">item 2</option>
    <option value="0003">item 3</option>
    <option value="0004">item 4</option>
    <option value="0005">item 5</option>
</select>

<select id="two">
    <option value="0001">item 1</option>
    <option value="0002">item 2</option>
    <option value="0003">item 3</option>
    <option value="0004">item 4</option>
    <option value="0005">item 5</option>
</select>


$(document).on('change', '#one', function () {
    id_one = $(this).val();
    $('#two option').show();
    $('#two option[value="' + id_one + '"]').hide();
});

$(document).on('change', '#two', function () {
    id_two = $(this).val();
    $('#one option').show();
    $('#one option[value="' + id_two + '"]').hide();
});

>Solution :

From time to time, iOS seems to not support hide()
Hiding DIVs using Jquery is not working in Safari (iOS)

You could go with addClass() and removeClass() :

<select id="one">
    <option value="0001">item 1</option>
    <option value="0002">item 2</option>
    <option value="0003">item 3</option>
    <option value="0004">item 4</option>
    <option value="0005">item 5</option>
</select>

<select id="two">
    <option value="0001">item 1</option>
    <option value="0002">item 2</option>
    <option value="0003">item 3</option>
    <option value="0004">item 4</option>
    <option value="0005">item 5</option>
</select>


.showMe {
  display: block;
}

.hideMe {
  display: none;
}


$(document).on('change', '#two', function () {
    id_two = $(this).val();

    $('#one option[value*="0"]').addClass('showMe').removeClass('hideMe');
    $('#one option[value="' + id_two + 
    '"]').removeClass('showMe').addClass('hideMe');
});

$(document).on('change', '#one', function () {
    id_one = $(this).val();

    $('#two option[value*="0"]').addClass('showMe').removeClass('hideMe');
    $('#two option[value="' + id_one + 
    '"]').removeClass('showMe').addClass('hideMe');
});