Styjun

I'm setting up several drop downs for users to customize their own coffee on our Blended Joe website on Shopify's platform using a third party Shopify App called Infinite Options to bypass the limit of 3 drop downs. With the current layout the user is able to :

1. Choose an Origin


2. Choose the Roast for that origin


3. Make it a Blend/Choose a second option (Selecting this option will show a hidden div which will allow the user to complete the Roast for the second Origin they chose and concluded with choosing the ratio of the first and second blends.

Infinite Options has the same select class for all drop downs however it allows you to create a class and a name element to use for styling or selectors.

My issue is after I select the first Origin as Indonesia it affects the Choose your Roast Choice(expected) but it also affects the second Roast Choice.

Is there a way to use the addClass() function to specify the dropdown I want affected, or is there a way to specify my selectors so that it targets the correct drop down?

I tried creating a conditional that uses the name attribute to specify the correct dropdown

 $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground").change(function()
 if ($('[name="properties[First Origin Choice]"]').val() == "Indonesia")
 $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Light Roast']").hide()
 else
 
 $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Light Roast']").show()
 

 if ($('[name="properties[First Roast Choice]"]').val() == "Light Roast")
 $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Indonesia']").hide()
 else
 
 $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Indonesia']").show()
 


 $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option:selected").attr('disabled', 'disabled').siblings().removeAttr('disabled');
);

//second Origin Selection
 $('select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground [name="properties[Second Roast Choice]"]').change(function()
 if ($('select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground [name="properties[Second Origin Choice]"]').val() == 'Indonesia')
 $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Light Roast']").hide()
 else
 
 $("select.spb-productdescfont.spb-productoptiontextcolor.spb-productoptionbackground option[value = 'Light Roast']").show()
 
);

You will see the full code on codepen: https://codepen.io/jcssll/pen/eXwRzW
Which as of just now is not working properly on Mac but the functionality of choosing the Indonesian origin and removing the Light Roast option value works well on my windows lap top.