How to get the value from select tag in alpine.js

I have an xml file where i am iterating the object as dropdownData

<select x-model="areaData" class="form-input w-full cursor-pointer" x-show="dropdownType==='Area'" x-on:change="selectArea($event.target.value)">
                    <template x-for="(item, index) in dropdownData" :key="index">
                        <option :value="item.dataid" x-text="item.displayname" class="workspace-data flex hover:bg-accent focus:bg-accent cursor-pointer gap-4 items-center  border-t first:border-t-0">
                        </option>
                    </template>
                </select>

 selectArea(areaItem) {
      console.log(areaItem, " <>? "); //item.dataid
 }

When i am trying to print the selected option in my selectArea method of .js file i am getting string item.dataid

You need to sign in to view this answers