show the selected option in a dropdown when updating data in a model using jquery and laravel-CodePudding

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 >
    <h4>Assign an Admin another Role</h4>
    <input type="hidden" name="adminrole_id" id="adminrole_id">

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

CodePudding user response：

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>