Conditional product variants working in Chrome but not safari or iOS

Hi, I have complex product variants set up (small, medium and large) and then quantities (bundle of 100, bundle of 200 and so on) and I want to hide certain options from the quantities list and only display those relevant to the consumer. unfortunately squarespace doesn't allow this as standard.

Here is my code (in a code block under "additional info" in the inventory product). This works fine in Chrome but not in Safari or iOS. In Safari the dropdown menus don't update to show the customer's choice (eg small, bundle of 100). Does anyone know what the issue in Safari is?

<script type="text/javascript">  

          $(function() {
    $("select[data-variant-option-name='size']").change(function () {

console.log($(this).val());
    if ($(this).val() == 'small') {

$("select[data-variant-option-name='pack of']")
    .find("option")
    .remove()
    .end()
    .val("Select pack of");
var selectSize = {"Select pack of":"Select pack of","bundle of 100":"bundle of 100","bundle of 200":"bundle of 200", "box of 1000":"box of 1000"}

$.each(selectSize, function(key, value) {
     $("select[data-variant-option-name='pack of']")
         .append($("<option></option>")
         .prop("value",key)
         .text(value));
});


    };

console.log($(this).val());
    if ($(this).val() == 'medium') {

$("select[data-variant-option-name='pack of']")
    .find("option")
    .remove()
    .end()
    .val("Select pack of");
var selectSize = {"Select pack of":"Select pack of","bundle of 50":"bundle of 50","bundle of 100":"bundle of 100", "box of 500":"box of 500"}

$.each(selectSize, function(key, value) {
     $("select[data-variant-option-name='pack of']")
         .append($("<option></option>")
         .prop("value",key)
         .text(value));
});


       };

console.log($(this).val());
    if ($(this).val() == 'large') {


$("select[data-variant-option-name='pack of']")
    .find("option")
    .remove()
    .end()
    .val("Select pack of");
var selectSize = {"Select pack of":"Select pack of","bundle of 50":"bundle of 50","box of 200":"box of 200"}

$.each(selectSize, function(key, value) {
     $("select[data-variant-option-name='pack of']")
         .append($("<option></option>")
         .prop("value",key)
         .text(value));
});


       }; 
});
  });
</script>

Hi, just wondering if you figured out the solution for this? I am trying to implement the same thing.

Thanks.

I dunno if you ever worked this out, but the trick to getting Safari to update the dropdown is to add an additional item to the list and then remove it.