How do i select my variant using buttons and submit it?

New Member
3 0 0

Currently i have button for each Variant type including Gender and Size.

I also have a select dropdown with all the variant options available. I am super confused to how do i trigger my select dropdown using my buttons.
Here is my code for Gender variants.

<ul class="category-lists">
             {% for value in product.options_by_name.gender.values %}
    <li class="lists">
        <button class="gender_options" type="button" id="{{ value }}">{{ value }}</button>
             {% endfor %}

 Here is my code for Size  variants.

<ul class="size-lists">
    {% for value in product.options_by_name.size.values %}
    <li class="list">
        <button type="button" class="extra-small">{{ value }}</button>
     {% endfor %}

Here is my select drop down with all the variant combos: 

<select id="product-select" name="id">
    {% for variant in product.variants %}
        <option id="{{ variant.title }}" value="{{ }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% endfor %}


But i am confused to how do i trigger these select dropdown using the buttons above?