Как отобразить выбранное значение из выпадающего - PullRequest
Новая
       18

Как отобразить выбранное значение из выпадающего

0 голосов
/ 30 марта 2020

Чего я хочу добиться, так это когда я нажимаю на раскрывающееся значение, например утвержденное, раскрывающееся меню должно исчезнуть, и должно отображаться выбранное значение «одобрено». 

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 
  }

так что это. Я застрял, как мне поступить. enter image description here

Ответы [ 2 ]

0 голосов
/ 30 марта 2020 
//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");
                    }
0 голосов
/ 30 марта 2020

Вы можете вызывать функции, используя атрибут 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>
...