title: How to display select options on alpinejs
body: <p>So Im working with alpinejs and I want to make a &quot;select&quot; where the options come from an alpinejs x-data that returns an array of nodes. I know how to do it in vanilla js where you just need to create a loop and then append those elements to the parent element. But have no clue of how to do it in alpine since Ive tried different options and none are working.</p>
  <pre><code>&lt;div x-data=&quot;{ options: $el.querySelectorAll('.m-tab__title') }&quot;&gt;
   &lt;select class=&quot;w-full md:hidden&quot;&gt;
          &lt;template x-for=&quot;option in options&quot;&gt;
              &lt;option x-html=&quot;option&quot;&gt;&lt;/option&gt;
          &lt;/template&gt;
   &lt;/select&gt;...
  </code></pre>
  <p>That just doesnt display any content in the select but [object HTMLDivElement].</p>
  <pre><code> &lt;div x-data=&quot;{ options: $el.querySelectorAll('.m-tab__title') }&quot;&gt;
       &lt;select class=&quot;w-full md:hidden&quot;&gt;
              &lt;template x-for=&quot;option in options&quot;&gt;
                  &lt;option x-text=&quot;option.innerText&quot;&gt;&lt;/option&gt;
              &lt;/template&gt;
       &lt;/select&gt;...
  </code></pre>
  <p>While that displays just the inner Text of each option but not even inside a proper select.</p>
  <p>Any way I can display each option as a select option?</p>
  <p>Thanks!</p>