如何在jQuery中设置选择选项的选定值？

Question

I am retreiving users and their id in Laravel. I retrieved the selected user ID and their full names. I want to set the selected option according to the current ID.

This is the value of the current user ID:

<input class="selected-user" type="input" value="{{$selectedUser}}" readonly />

This is my select code in Laravel Blade:

        <div class="form-group required">

            {!! Form::label('user_name', 'Assigned to', ['class' => 'control-label required']) !!}

            <div class="controls">

                <select class="form-control form-field-username form-field-user-edit form-field-users">
                    @foreach($users as $user)
                        <option value="{{$user->id}}">{{$user->getFullNameAttribute()}} </option>
                    @endforeach 
                </select>

            </div>                      

        </div>

This is my jquery code:

var selectedUser = $('.selected-user').val();

    $('.form-field-user-edit > option[value="selectedUser"]').attr('selected','selected');

The above code is not working.

I want to mark the select selected option according to the value .selected-user

Answer 1

Try this.. You can select the option from server side

<select class="form-control form-field-username form-field-user-edit form-field-users">
    @foreach($users as $user)
         <option value="{{$user->id}}" {{ $selectedUser== $user->id ? 'selected="selected"' : '' }}>{{$user->getFullNameAttribute()}} </option>
    @endforeach 
</select>

Answer 2

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

You should instead do this on the server side using the html. The link I pasted is about the tag, and down the list you see an attribute called "selected". if this is present in your tag, it will be selected:

<option value="?" selected> This option is selected </option>

Answer 3

You just have to change the line of code from,

 $('.form-field-user-edit > option[value="selectedUser"]').attr('selected','selected');

to

$('.form-field-user-edit > option[value="selectedUser"]').attr('selected',true);

Answer 4

Try this:

var selectedUser = $('.selected-user').val();

$('.form-field-user-edit > option[value="'+ selectedUser +'"]').prop('selected', true);