时间戳

首页 > 解决方案 > 如何为表中的自定义选择做事件监听器？

javascript - 如何为表中的自定义选择做事件监听器？

问题描述

我有一个表，它包含数据库中的列，我在列上有自定义选择，还有按钮更新。现在，当我单击按钮时，我需要在自定义选择中创建事件侦听器并获取用户选择的内容并使用 JavaScript 在控制台上打印选择的值……我该怎么做，请任何人帮助我…… 

@foreach ($bookinghalls as $item)

    <tr>
        <td>{{$item->id}}</td>
    <td>{{$item->name}}</td>
   <td >{{$item->hall_name}}</td>
    <td>{{$item->from_date}}</td>
    <td>{{$item->to_date}}</td>
    <td>{{$item->type_booking}}</td>  
    <td  ><select class="custom-select mr-sm-2" name="intervel"   >
@if ($item->pay==0)
<option value="0" >Not paid</option>    
<option value="1" >paid </option>

@else ($item->pay==1)
<option value="1" >paid </option>
<option value="0" >Not paid</option>
@endif
</td>
     <td id="stauts">  <?php 
        if($item->stauts==0)
         print_r("available");
     elseif($item->stauts==1)
     print_r("it's Processing ");
     elseif($item->stauts==2)
     print_r("booking done");
       ?></td>
     <td><button type="submit"  class="btn btn-primary but_update"  name="imagaid"   >update</button>
     </td>

标签： javascriptbootstrap-4

解决方案

要为<select>标签设置事件侦听器并获取 的值<option value="any-value" selected>text</option>，请执行以下操作：

document.querySelector('.custom-select').addEventListener('change', function () {
    let selectedValue = this.value;
    console.log(selectedValue);
});

推荐阅读