Select another product inside one landing page

New Member
1 0 0

Hello, shopify community !

I am the newest in shopify development. Didn't saw any recommendations for my problem.

I have a landing page. On this page I have product-module sections which includes some information(title, description,image, price) of product. Also I have Select and options of this <select> are links to another product pages. I need to change this for not redirecting to another page, but product must be dynamiccaly changed on the same page. Can you help me with that. I saw about ajax, but i don't know how it must look like. 
Please help and have a nice day/evening



{% capture product__flavor_selector%}
    {% if product.metafields.manufactur.related_flavors %}
      <div class="flavor-selector">
        <label class="meta-label" for="flavor">Flavor</label>
        <button class="button dropdown" type="button" name="flavor" data-toggle="flavor-dropdown">{{ product.title }}</button>
        <div class="dropdown-pane" id="flavor-dropdown" data-dropdown data-hover="false" data-hover-pane="false">
          {% assign flavors = product.metafields.manufactur.related_flavors | split: "|" %}
          {% for flavor in flavors %}
          <a href="{{ all_products[flavor].url }}">{{ all_products[flavor].title }}</a>
          {% endfor %}
    {% endif %}
  {% endcapture %}