title: Reload <ul> with event handler function
body: <p>I am extremely new to JavaScript/HTML/CSS. As a first website project I am working on my online shop using Shopify.</p>
  <p><a href="https://tpvm5oi54gjh03pr-51451003036.shopifypreview.com/collections/lo-mas-popular/products/cilindro" rel="nofollow noreferrer">This is My Website</a></p>
  <p>I am trying to update the list of images (thumbnails below the main picture) after one of the options is changed (size or color).</p>
  <p>I have managed to display the correct images when the page first loads by using the alt_text of each figure. For example, if you change the options and reload the website, you will see the appropriate figures. I did that as follows:</p>
  <pre><code>{% assign wanted_alts = product.selected_or_first_available_variant.options %}
  &lt;ul&gt;
  {% for media in product.media %}
      {% if wanted_alts contains media.alt or media.alt == &quot;All&quot; %}
          &lt;li&gt;
          ...
          &lt;/li&gt;
      {% endif %}
  {% endfor %}
  &lt;/ul&gt;
  </code></pre>
  <p>Basically, I just load the images that have an alt_text equal to the selected options.</p>
  <p>I now want to change all the thumbnails when an option is selected e.g. you select a different color. At the moment it only works if you</p>
  <ol>
  <li>First select the options.</li>
  <li>Then you refresh the page.</li>
  </ol>
  <p>I want the list to update automatically. I was able to find that the event of choosing another option is handled by this function:</p>
  <pre><code>_onSelectChange: function() {
        var variant = this._getVariantFromOptions();
  
        this.container.dispatchEvent(
          new CustomEvent('variantChange', {
            detail: {
              variant: variant
            },
            bubbles: true,
            cancelable: true
          })
        );
  
        if (!variant) {
          return;
        }
  
        this._updateMasterSelect(variant);
        this._updateImages(variant);
        this._updatePrice(variant);
        this._updateSKU(variant);
        this.currentVariant = variant;
  
        if (this.enableHistoryState) {
          this._updateHistoryState(variant);
        }
      }
  </code></pre>
  <p>I want to achieve something like (forgive my ignorance):</p>
  <pre><code>_onSelectChange: function() {
          ...
       /* Reload the &lt;ul&gt; tag that sets which figures to display */
      }
  </code></pre>
  <p>Can someone point me into the right direction?</p>
  <p><strong>EDIT:</strong>
  I have been able to get the desired behaviour (in a non-optimal way) with the following:</p>
  <pre><code>_onSelectChange: function() {
          ...
          location.reload();
      }
  </code></pre>
  <p>Which reloads the entire page.</p>
  <p>I have tried to reload just the <code>&lt;ul&gt;</code>, but I don't know how to do it. I have tried the following, but it didn't work:</p>
  <pre><code>&lt;div id=&quot;myID&quot;&gt;
  {% assign wanted_alts = product.selected_or_first_available_variant.options %}
  &lt;ul&gt;
  {% for media in product.media %}
      {% if wanted_alts contains media.alt or media.alt == &quot;All&quot; %}
          &lt;li&gt;
          ...
          &lt;/li&gt;
      {% endif %}
  {% endfor %}
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And:</p>
  <pre><code>_onSelectChange: function() {
          ...
          $('#myID').load(document.URL +  ' #myID');
      }
  </code></pre>
  <p>Any help is appreciated.</p>