Jquery to change select box option text – does not work on iOS – Magento

On a Magento eCommerce site, the current default behaviour for product options which have different prices is to have the price differences in the Select dropdown, eg, Blue +£2, Orange -£3. The client doesn’t want this here.

I’m not fluent enough in Magento to change this via the PHP code, so was using JQuery to modify the text in the dropdowns. While this works on my Windows machine and on Android phones, it seems it does not work on iPhones and iPads. (Not sure about Macbooks etc). The prices are still there the first you open the select box, but are gone the next time. So the code does work, just not before opening.

require(["jquery"], function($) {
    $(document).ready(function() {
        // $('select.super-attribute-select').focus(function(){
            $('select.super-attribute-select').on('focus', function(){

            $('option').each(function(){
                var selectedOption = $(this).text();

                if (selectedOption.indexOf('+') > -1) {
                    selectedOption = selectedOption.substring(0, selectedOption.indexOf('+'));
                    $(this).text(selectedOption);
                } else if (selectedOption.indexOf('-') > -1) {
                    selectedOption = selectedOption.substring(0, selectedOption.indexOf('-'));
                    $(this).text(selectedOption);
                }
            });     
        });

    });
});

Initially I had the .focus but have also tried the .on(‘focus’) version and neither work.

If I put in
$(“.product-info-main .page-title-wrapper h1”).css(‘color’, ‘#485158’);
after the document.ready, the colour of the H1 changes, so the code is being found.
Is there something else besides focus I should be using to allow it to work with iOS?

ANSWER – I ended up changing to mousedown instead of focus and it seems to work now. Thanks