Fetch api and bind the value

[yudyananda]

I wonder how to fetch API and bind the value from the select component. Each option have name and their own endpoint to fetch.

Here's the example code

<div x-data="{ citationStyle: '' }">
     <select x-model="color">
       {foreach from=$citationStyles item="citationStyle"}
          <option data-api="{$citationStyle.apiUrl}">
             {$citationStyle.title|escape}
          </option>
       {/foreach}       
     </select>
     <div class="pt-4">
       <div x-text="citationStyle">
         <!-- the data api result here -->
       </div>
     </div>
</div>