Google Model Viewer Variant Dropdown List Conversion

Question

I am trying to create a product configurator for the company I work for, and so far I have Google's Model Viewer doing just what I want! I am able to change the size and color of the product, however, I am wanting to change the "dropdown" of the variant selector to a "grid" to act more like buttons rather than a dropdown list. As I now only have about a months worth of history working in HTML, CSS, and JS I am not sure how to go about this. I have images for each swatch of color that I am wanting to populate the options with.

I've also tried using DDSlick Jquery to act more as a dropdown list that has images (for the swatch colors) but I couldn't figure out how to get that to work either.

Any help with this would be greatly appreciated!

<div>
  Choose a Color:
  <select id="variant"></select>
</div>

<script>
  const modelViewerVariants = document.querySelector("model-viewer#MalloryChest36");
  const select = document.querySelector('#variant');
  modelViewerVariants.addEventListener('load', () => {
    const names = modelViewerVariants.availableVariants;
    for (const name of names) {
      const option = document.createElement('option');
      option.value = name;
      option.textContent = name;
      select.appendChild(option);
    }
  });
  select.addEventListener('input', (event) => {
    modelViewerVariants.variantName = event.target.value;
  });
</script>

Answer 1

Got it to work finally after much trial and error!

<div class="colors">
   <div id="variant">
   Choose a Color:
   </div>
</div>

<!-- Size Script -->
<script type="module">
  const modelViewer = document.querySelector("model-viewer"); window.switchSrc = (element, name) => { const base = "../Assets/Models/" + name; modelViewer.src = base + '.glb'; const size = document.querySelectorAll(".size"); size.forEach((element) => {element.classList.remove("selected");
  var colors = document.getElementById("variant"); var colorButton = colors.firstChild; while( colorButton ) { colors.removeChild( colorButton ); colorButton = colors.firstChild; }}); element.classList.add("selected"); }; document.querySelector(".sizebuttons").addEventListener('beforexrselect',
  (ev) => { ev.preventDefault(); });
</script>

<!-- Color Script -->
<script type="module">
  const modelViewerVariants = document.querySelector("model-viewer"); const select = document.querySelector('#variant'); modelViewerVariants.addEventListener('load', () => { const names = modelViewerVariants.availableVariants; for (const name of names)
  { const color = document.createElement('button'); color.value = name; color.textContent = name; select.appendChild(color); } }); document.getElementById('variant').addEventListener('click', (event) => { modelViewerVariants.variantName = event.target.value;
  });
</script>

If anyone else needs to reference this I will leave it up. (I am not a programmer at all, so I am sure there could be easier or quicker ways to do this)