<!-- wp:paragraph -->
<p>add options liquid code in main-product.liquid</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>{%- else -%}<br><br>{%- assign yxindex = 0 -%}<br>{%- for option in product.options_with_values -%}<br>{%- if yxindex == 0 -%}<br>{%- assign firstid = 'Option-' | append: section.id | append : '-' | append: forloop.index0 -%}<br><br>{%- endif -%}<br>{%- if yxindex == 1 -%}<br>{%- assign secondid = 'Option-' | append: section.id | append : '-' | append: forloop.index0 -%}<br><br>{%- endif -%}</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">                  &lt;div class="product-form__input product-form__input--dropdown">
                    &lt;label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                      {{ option.name }}
                    &lt;/label>
                    &lt;div class="select">
                      &lt;select
                        id="Option-{{ section.id }}-{{ forloop.index0 }}"
                        class="select__select"
                        name="options[{{ option.name | escape }}]"
                  {%-  if yxindex == 0  -%}
                        onchange="getOption(this)"
                    {%- endif -%}
                        form="{{ product_form_id }}"
                      >
                        {%- for value in option.values -%}
                          &lt;option
                            value="{{ value | escape }}"
                            {% if option.selected_value == value %}
                              selected="selected"
                            {% endif %}
                          >
                            {{ value }}</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>then add js content into</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>assets / product-form.js</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>function getOption(el) {<br>const optValue = el.value;<br>let secondOptions = document.querySelector("#"+window.second_select_id);<br>Array.from(secondOptions).forEach((option) =&gt; {<br>secondOptions.removeChild(option)<br>})<br>let second_available_opts = [];<br>for ( let i = 0 ; i &lt; window.product_second_options.length; i++) {<br>for ( let j = 0; j &lt; window.yx_product_variants.length; j++) {<br>let pvar = window.yx_product_variants[j];<br>if ( pvar.option1 == optValue &amp;&amp; pvar.option2 == window.product_second_options[i] ) {<br>second_available_opts.push(window.product_second_options[i])<br>}<br>}<br>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>for ( let i = 0 ; i &lt; second_available_opts.length; i++) {<br>let opt = document.createElement('option')<br>opt.appendChild(document.createTextNode(second_available_opts[i]));<br>opt.value = second_available_opts[i];<br>secondOptions.appendChild(opt);<br>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>window.addEventListener('load', (event) =&gt; {<br>getOption(document.querySelector("#"+window.first_select_id));<br>});</p>
<!-- /wp:paragraph -->