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

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

Solution

When testing this in a laravel playground i couldnt completely recreate it so i tried to have as many of the same things the question had the few big changes were:

Change 1:

There now is a attribute called x-data to the functions parent this must be set for alpine.js to work.

Change 2:

I changed the x-on:change() to its more used attribute @change()

Code example:

this was done on a laravel playground and i hope it helps.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"  href="https://beyondco.de/css/default.css">
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data class="container px-4 md:px-8 mx-auto pt-4 flex flex-col">
        <select x-model="areaData" class="form-input w-full cursor-pointer" @change="selectArea($event.target.value)">
                <option :value="4"  class="workspace-data flex hover:bg-accent focus:bg-accent cursor-pointer gap-4 items-center  border-t first:border-t-0">
                5
                </option>
                <option :value="3" class="workspace-data flex hover:bg-accent focus:bg-accent cursor-pointer gap-4 items-center  border-t first:border-t-0">
                2
                </option>
                <option :value="1" class="workspace-data flex hover:bg-accent focus:bg-accent cursor-pointer gap-4 items-center  border-t first:border-t-0">
                3
                </option>
                <option :value="2" class="workspace-data flex hover:bg-accent focus:bg-accent cursor-pointer gap-4 items-center  border-t first:border-t-0">
                4
                </option>

        </select>
    </div>
    <div id="result"></div>
    <script>
        function selectArea(areaItem) {
            document.getElementById('result').innerHTML = 'hello';
            console.log(areaItem, " <>? "); //item.dataid
        }
    </script>
</body>
</html>

this snippet does run correctly but has an error because not all variables are set in this snippet that are set in your code. I hope this helps