Can I edit select menu markup in Shopify Liquid without removing tags?

Uwe_Dept
Visitor
1 0 0

Hi together,

I have the problem, that I want to edit the markup of a select in my Liquid page.

<select>
<option>What a nice option</option>
<option><a href="somewhere">An even better option</a></option>
</select>

 

But every <tag> between <option> is removed. Can I avoid that one? And if yes, how?  🙂

Best regards

Uwe

Reply 1 (1)

gina-gregory
Shopify Expert
742 51 211

You cannot put other HTML tags inside an <option> tag. You can either build a custom dropdown NOT using an HTML <select>, or you can set up some javascript that will navigate you to another URL, like this:

<select id="select-navigation">
  <option value="https://domain.com/pages/test-1">Option 1</option>
  <option value="https://domain.com/pages/test-2">Option 2</option>
</select>

<script>
(function() {
   var nav = document.getElementById("select-navigation");
   nav.addEventListener("change",function(evt){
    window.location = nav.value
  });
})();
</script>