1

I have a Wordpress Woocommerce website with a hidden dropdown on my product page where I programmatically select an option from the dropdown when the page is loaded.

This function is working on my desktop in Google Chrome, Firefox and Microsoft Edge. It's also working on my Samsung phone in Google Chrome. For some reason, it's not working on my friends iPhone in the Safari browser.

$(document).ready(function() {
  jQuery('.variations_form').on('wc_variation_form', function() {

    if ($('select#account option').length > 0) {

      var optionsInDropdown = 0;

      console.log($('select#account option'));

      $('select#account option').each(function() {
        if ($(this).hasClass("attached enabled")) {
          console.log($(this).val());
          optionsInDropdown++;
        }
      });

      console.log(optionsInDropdown);

      if (optionsInDropdown > 1) {
        $('select#account option').each(function() {
          if ($(this).hasClass("attached enabled")) {
            if ($(this).val() == "From scratch") {
              return;
            }
            $(this).attr('selected', 'selected');
            $('select#account').trigger("change");
            console.log("Account " + $(this).val() + " geselecteerd");
            return;
          }
        });
      }

      if (optionsInDropdown == 1) {
        $('select#account option').each(function() {
          if ($(this).hasClass("attached enabled")) {
            $(this).attr('selected', 'selected');
            $('select#account').trigger("change");
            console.log("Account " + $(this).val() + " geselecteerd");
            return;
          }
        });
      }

    }

  });
});
biberman
  • 5,606
  • 4
  • 11
  • 35
svw055
  • 85
  • 7
  • ```it's not working on my friends iPhone in the Safari browser.``` What is the expected behaviour which is not working? – ikhvjs Jun 21 '21 at 12:20
  • The product page has a button "Buy now". For him it's disabled because it seems there is no product variation selected in the dropdown by my function, which is required for the button to be active – svw055 Jun 21 '21 at 12:24
  • Is the DOM element is invisible on the page? Can you provide some HTML examples? – ikhvjs Jun 21 '21 at 12:32
  • The select dropdown is hidden, this is the element: https://imgur.com/WTlkEmP – svw055 Jun 21 '21 at 12:47
  • Found this: https://stackoverflow.com/a/19727731/14032355 – ikhvjs Jun 21 '21 at 13:04
  • Thanks, I have also found that I tried it but it still doesn't work. Option is not being selected in my dropdown: https://imgur.com/1KceAod – svw055 Jun 21 '21 at 13:16
  • 1
    Try replace all ```$(this).attr('selected', 'selected');``` with ```$(this).prop("selected",true);``` – ikhvjs Jun 21 '21 at 13:19
  • Thanks so much, I think that was it! Really appreciate you helping me – svw055 Jun 21 '21 at 13:31
  • Good to hear! you are welcome:) – ikhvjs Jun 21 '21 at 13:33

0 Answers0