title: Alpine.js Form has Multiple Selects, How to get Option values?
body: <p>Using Alpine.js how do you get the value of <code>select1</code> or <code>select2</code> in the main <code>form()</code> function?</p>
  
  <p>I can do it if I don't use <code>x-data</code> on the Selects, but then you have to do funky things with the <code>open</code> variable so it is unique for each Select (if you don't, then all the Selects open at once).</p>
  
  <p>Notes:</p>
  
  <ul>
  <li>I'm <strong>not</strong> using <code>x-for</code> to iterate the Select Option inputs because for performance reasons I'm pre-rendering those in HTML. They have icons and there is over 250 of them.</li>
  <li>Is the <code>@click="$dispatch('input', 'option1Key')"</code> technique the best way to set the value of the selected option, since not using an actual select input and x-for?</li>
  </ul>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div x-data="form()"&gt;
  
    &lt;!-- snip other fields like regular inputs --&gt;
  
    &lt;label for="select-1"&gt;Select 1&lt;/label&gt;
    &lt;div x-data="{ select1: '', open: false }"&gt;
      &lt;div&gt;Selected: &lt;span x-text="select1"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;button @click="open=true"&gt;Select ...&lt;/button&gt;
      &lt;ul x-show="open" @click.away="open=false" x-model="select1" style="display: none;"&gt;
        &lt;li @click="$dispatch('input', 'option1Key')"&gt;&lt;i class="icon"&gt;&lt;/i&gt; Option1&lt;/li&gt;
        &lt;li @click="$dispatch('input', 'option2Key')"&gt;&lt;i class="icon"&gt;&lt;/i&gt; Option2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;label for="select-2"&gt;Select 2&lt;/label&gt;
    &lt;div x-data="{ select2: '', open: false }"&gt;
      &lt;div&gt;Selected: &lt;span x-text="select2"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;button @click="open=true"&gt;Select ...&lt;/button&gt;
      &lt;ul x-show="open" @click.away="open=false" x-model="select2" style="display: none;"&gt;
        &lt;li @click="$dispatch('input', 'option1Key')"&gt;&lt;i class="icon"&gt;&lt;/i&gt; Option1&lt;/li&gt;
        &lt;li @click="$dispatch('input', 'option2Key')"&gt;&lt;i class="icon"&gt;&lt;/i&gt; Option2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;button class="search" type="submit" :disabled="loading" @click="search()"&gt;Search&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  function form() {
    return {
      select1: '',
      select2: '',
      search() {
        console.log(select1); // undefined
        console.log(select2); // undefined
      },
    };
  };
  </code></pre>