如何显示从下拉菜单中选择的值

Question

[我想要实现的是，当我单击下拉列表的值时，例如已批准，该下拉列表将消失，并且需要显示所选值'approve'。

balde

<td>
                      <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Status
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                          <button class="dropdown-item" data-url="{{route('leave.update', $leave->id)}}" data-status_id="2" onclick="updateleave(this) ">Approve</button>
                          <button class="dropdown-item" data-url="{{route('leave.update', $leave->id)}}" data-status_id="3" onclick="updateleave(this)">Rejected</button>
                        </div>
                      </div>
                   </td> 

<script type='text/javascript'>
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

  function updateleave(el) {
    let data = {
          status_id:$(el).data('status_id')
    };
    $.ajax({
      url: $(el).data('url'),
      type: 'PUT',
      data: {
        _token:CSRF_TOKEN,
        leave:data
      },
      dataType: 'JSON',
      success: function(result) {
          if (result.error) {
            alert(result.error);
          } else {
            location.reload();
          }
      },
      error: function(err) {
          alert('something went wrong');
      }
    });
  }

  function removedropdown(el) {
      // to remove the dropdown after select 
  }

所以就这样。我被卡住了，我该怎么办。

Answer 1

您可以使用onclick属性来调用函数，但是我建议为此使用事件处理程序。

所以可以onclick="updateleave(this);removedropdown(this)"，但我建议：

$('.dropdown-item').click((event) => {
  updateleave(event.target);
  removedropdown(event.target);
});

function updateleave(el) {
  ///ajax stuff here
}

function removedropdown(el) {
  // to remove the dropdown after select 
  const dropdown = el.closest('.dropdown'); //get dropdown
  const selected = $(`<label>${$(el).text()}</label>`); //create selected label    
  selected.appendTo($(dropdown).parent()); //append label to dropdown's parent before...
  dropdown.remove(); //...removing dropdown
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
balde

<td>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Status
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <button class="dropdown-item" data-url="{{route('leave.update', $leave->id)}}" data-status_id="2">
        Approve
      </button>
      <button class="dropdown-item" data-url="{{route('leave.update', $leave->id)}}" data-status_id="3">
        Rejected
      </button>
    </div>
  </div>
</td>