如何使用AlpineJS获取数据多选择选项，例如Jquery中的.data？

如何解决如何使用AlpineJS获取数据多选择选项，例如Jquery中的.data？

谢谢您的时间，下面的代码有问题，我使用AlpineJs和Blade。

      @if(!empty($optiondetail))
    @foreach($optiondetail as $key_optdetail =>$val_optdetail)
    <div class="mt-2">
        <label class="text-gray-700 text-sm mt-4 w-1/1" for="count">{{$val_optdetail[0] -> groupname}}</label>
        <div class="items-center mt-1 ml-2 w-full">
          <div class="inline-block relative w-64">
            <select wire:model="optionselected.{{$key_optdetail}}" class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
              <option>--choose--</option>
              @foreach($val_optdetail as $optdet)
                <option value="{{$optdet -> types_id}}">{{$optdet -> typename}}</option>
              @endforeach
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
            </div>
          </div>
        </div>
<div id="presult{{ $loop->iteration }} ">result this</div>
    </div>
    @endforeach 
@endif 

我要创建大于1个max 5的select选项，这是我的jquery示例，希望您在运行以下代码后能找到所需的内容。

$('.classselect').change(function(){
    var abc = $(this).find(':selected').attr('data-id');
    var presult = $(this).find(':selected').attr('data-getattr');
    $(presult ).text(abc);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.4/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="p-10">
    <select class="classselect w-56 block appearance-none bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
      <option data-id="0" data-getattr="#presult1">----------</option>
      <option data-id="+100" data-getattr="#presult1">Class 1</option>
      <option data-id="+150" data-getattr="#presult1">Class 2</option>
      <option data-id="+500" data-getattr="#presult1">Class 3</option>
  </select>
  <p id="presult1" class="text-blue-700">
  result a
  </p>

  <hr class="my-5"/>
  <select class="classselect w-56 block appearance-none bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
      <option data-id="0" data-getattr="#presult2">----------</option>
      <option data-id="+92" data-getattr="#presult2">Teacher A</option>
      <option data-id="+85" data-getattr="#presult2">Teacher B</option>
      <option data-id="+400" data-getattr="#presult2">Teacher C</option>
  </select>
  <p id="presult2" class="text-blue-500">
  result b
  </p>
  </div>
</div>

我的解释：

• 如果我想添加新的多选选项，并且可以从数据库中执行 因为代码会自动产生（状态已完成），
  
• 当用户选择选择选项之一时，值可以自动显示 在“ ＃presult1 ”中或直到“ ＃presult5 ”之前，不要从 数据库，但来自属性元素。
  （状态：等待中的解决方案 ）
  
• 完成填写选择选项，用户可以单击提交以 数据库（状态已完成）。

任何人都可以帮助我，如果我想使用alpinejs和blade，请给我解决我的代码的问题

我的情况是什么？

谢谢