Looking for help with JS dynamic dropdown


I am very admittedly elementary when it comes to javascript. I am wanting to (or should I say the client more so) wants to see the dropdown on the product bundle page change dynamically as you select the color variant. There will be multiple products listed under the bundle so the dropdown will need to change for each of the products on the click of the color variant. 

https://bedside-manor-charlotte.myshopify.com/products/sferra-giotto-1 (password is BedsideManor123!)

We are using the Mageworx Product Bundles app for the "bundling" feature and the color variants in the product description are being pulled directly from the product variants. 

Any advice for the best way to go about this? I know I need to start with the on click function of the variant-input class however I am not sure how to get the options from the dropdown that match. 


1142 191 231


Here is a script I quickly coded for you.

1. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
2. paste this code right above the </body> tag:

$( document ).ready(function() {
    const items = $(`.variant-input[data-value] label`);
	const dropdown = $(`.mw-gp__table__variants`);

	items.on('click', function(){
		const name = $(this).text().trim();
		const chosenItem = dropdown.find(`option:contains("${name}")`).attr('value');

Although it will solve the issue I ought to warn you that this is not the most ideal to get this done, ideally it has to be coded within the main javascript file & check for possible errors to avoid issues in the future. 

Let me know whether it works for you.

Kind regards,

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com