1

i want to assign a user another role in a bootstrap modal upon clicking a button in a datatable.i have successfully created a function to show a modal for each user.in the modal there is an input to show the role for the user and also all the role that should be reassigned.i have been able to show the all the other inputs from the table but am unable to get the selected role option I had saved in the table earlier.how can I achieve this that I can be able to show the option i had saved from the table earlier and display it when editing in the modal.how can i achieve this?

this is my script

   $(document).on('click','.update-btn',function(e){
        e.preventDefault();

        var adminrole_id=$(this).val();
        var url = '{{ route("getadmin_role", ":id") }}';
               url = url.replace(':id', adminrole_id);
        $('#assignadminmodal').modal('show');

        $.ajax({
          type:"GET",
          url:url,
          success:function(response)
          {
            console.log(response.admindata.roles.role_name);
            if (response.status==404)
            {
                alert(response.message);
                $('#assignadminmodal').modal('hide');
            } 
            else
            {
                $('#edit_name').val(response.admindata.name);
                $('#adminrole_id').val(adminrole_id);
                // $('#roleid').find('option:selected').val()
                // var roleid = 
                $('#roleid option:selected').text(response.admindata.roles.role_name);
                // $('#roleid option:selected').val(response.admindata.roles.role_name);
                
            }
          }
        })
    })

in the blade file

<div class="modal-body">
    <h4>Assign an Admin another Role</h4>
    <input type="hidden" name="adminrole_id" id="adminrole_id">

    <div class="form-group">
       <label style="font-size:15px;">Name</label>
       <input type="text" class="read-only form-control" name="name" id="edit_name">
   </div>
   <div class="form-group">
       <label style="font-size:15px;">Admin Roles</label>
       <select name="adminroles" id="roleid" class="form-control text-white bg-dark" required>
          @foreach ($allroles as $role)
             <option value="{{ $role->id }}">
                {{ $role->role_name }}
             </option>
          @endforeach
       </select>
   </div>
 </div>
0

1 Answer 1

1

You can use .filter() to filter out the option and use .prop() to select it. Try this

$('#roleid option').filter(function(){
    return $(this).text().trim() == response.admindata.roles.role_name
}).prop('selected', true)

Demo

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="roleid">
    <option value=""></option>
    <option value="1">Administrator</option>
    <option value="2">Accountant</option>
    <option value="3">Other Role</option>
</select>
<script type="text/javascript">
    let response = {admindata: {roles: {role_name: 'Accountant'}}}

    $('#roleid option').filter(function(){
        return $(this).text().trim() == response.admindata.roles.role_name
    }).prop('selected', true)
</script>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.