如何从下拉列表中显示选定的值答案

【问题标题】：How to display the selected value from the dropdown如何从下拉列表中显示选定的值
【发布时间】：2020-07-10 10:42:16
【问题描述】：

我想要实现的是当我点击下拉值时，例如批准，下拉应该消失并且选择的值'批准'需要显示。

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">
                        @if($leave->status_id == 1)
                          <button class="dropdown-item" data-url="{{route('leave.update', $leave->id)}}" data-status_id="2" onclick="updateleave(this);removedropdown(this)">Approve</button>
                          <button class="dropdown-item" data-url="{{route('leave.update', $leave->id)}}" data-status_id="3" onclick="updateleave(this);removedropdown(this)">Rejected</button>
                        @else
                          {{$leave->statustype->status}}
                        @endif
                    </div>
                  </td> [![enter image description here][1]][1]

<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 
  }

就是这样。我被卡住了，我该如何继续。

【问题讨论】：

您希望下拉菜单在 ajax 调用成功后消失，还是在单击按钮（批准或拒绝）后立即消失？
在单击按钮后立即。我试过点击，当我点击它们时，数据库中的数据可以更新。所以现在我只想让下拉菜单在点击后消失并显示所选项目

标签： javascript laravel view laravel-blade policies

【解决方案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>

【讨论】：

ok lemme try 但是如果在 div 按钮内有其他内容我做了但是下拉菜单没有消失
我做了，但下拉菜单仍然启用。它没有消失
老实说，我不明白你所说的 如果在 div 按钮内的其他情况下我做了什么。你想消失的不是<div class="dropdown">吗？请用您尝试过的内容和任何新信息更新您的问题
我已经更新了我的代码，当前输出如图所示。我可以通过单击下拉菜单看到批准。我没有在这里使用 javascript。只有 if 和 else 在刀片中。如果我错了，请纠正我
看，我可以帮助你处理 JS，但我从未使用过 laravel。也就是说，您使用的@if-else 结构似乎永远不会隐藏下拉菜单，它只会在请假状态 ID 不是 1 时隐藏 下拉菜单中的按钮。最后，如果您可以使用leave 变量有条件地渲染某些html元素而不是其他元素，那么您不需要使用JS显示/隐藏/删除html，只需使用blade的功能即可。

【解决方案2】：

//use condition in blade file 
//if status is Approvethen show selected Approve
//send id with onclick function like
onclick="approve(\'' + row.id + '\')" 
// in ajax
 function approve(id) {
    Swal.fire({
        title: '',
        text: "confirmation message",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes',
        cancelButtonColor: 'No'
    }) if (result.value) {
            approveFunction(id, 'approve');
        }

}
 function approveFunction (id, status) {
    axios({method: 'post',
        url: baseUrl + '',//route here
        data: {_token: $('meta[name="csrf-token"]').attr('content'), id: id, status: status}
    })
           success: function(data) {
                       alert("sucess");
                    }

【讨论】：