How can I set the value for an HTML <select>? - html

Question

I needed to set a value for < select>
so I added a "value=.." to the element thinking that it will give it a default value.
Is there any way other than selected to use, because in my case the value changes from a candidate to an other.
I did this so the user can see first the candidate's service then change it in case of an error..
<span >Service</span>
<select class="form-control item pb-2" name="service" value={{ $candidate->service->service_name }}>
<option value="Outsourcing"> <span class="font-weight-bold">Outsourcing</span></option>
<option value="Developpement"> <span class="font-weight-bold">Developpement</span></option>
<option value="Call center"> <span class="font-weight-bold">Call center</span></option>
</select>

Answer 1

You cannot set a default value for select. Instead, you can do something like this:
<select class="form-control item pb-2" name="service" >
<option value={{ $candidate->service->service_name }}>{{ $candidate->service->service_name }}</option>
<option value="Outsourcing"> <span class="font-weight-bold">Outsourcing</span></option>
<option value="Developpement"> <span class="font-weight-bold">Developpement</span></option>
<option value="Call center"> <span class="font-weight-bold">Call center</span></option>
</select>

Answer 2

Any option can be set to selected and that will be the default value for the select. That is the standard way of setting the value. Why not use it?
Also options do not have tags inside
<select class="form-control item pb-2" name="service" >
<option selected value="{{ $candidate->service->service_name }}">{{ $candidate->service->service_name }}</option>
<option value="Outsourcing">Outsourcing</option>
<option value="Development">Development</option>
<option value="Call center">Call center</option>
</select>
If you must insert a new option and select it then you can use JavaScript
window.addEventListener("load",function() {
const sel = document.querySelector("[name=service]");
const val = "{{ $candidate->service->service_name }}";
const opts = [new Option(val,val),...sel.options]
sel.length = 0;
opts.forEach(opt => sel.appendChild(opt));
sel.value = val;
})
<span>Service</span>
<select class="form-control item pb-2" name="service">
<option value="Outsourcing">Outsourcing</span></option>
<option value="Development">Development</option>
<option value="Call center">Call center</option>
</select>