Fill textfield with the description corresponding to the value selected in a combobox

Question

I have in my view a select that receives data from functions and lists.

<select id="id_mfuncao" name="id_mfuncao" class="form-control">
    <option value=""><< selecione >></option>
    @foreach($mfuncoes as $mfuncao)
        <option value="{{ $mfuncao->id }}">{{ $mfuncao->nome }}</option>
    @endforeach
</select>

Apart from id and name, I also get the description of the functions. How can I load the description of the selected function into a textfield?

<input readonly="" type="text" id="descricao" name="descricao" class="form-control">

I don’t think we need to use ajax to search again for the value since I already have it loaded, but I lack knowledge and could not find a term to search for a solution on the web.

This is the data I get from the function:

When "Officer General..." is selected I want to show the description in the textfield.

Answer 1

Assign the description in your options

Since you are already using the value and text of the option, you can create an additional attribute in option. Behold date-*

@foreach($mfuncoes as $mfuncao)
    <option value="{{ $mfuncao->id }}" data-descricao="{{ $mfuncao->descricao}}">
        {{ $mfuncao->nome }}
    </option>
@endforeach

Assign the selected value to the input

Add the event on change at the select and get the value of option selected or the text and assign to the input.

• .val() gets the value of the selected option
• $("option:selected", this).text() gets the text of the selected option
• $("option:selected", this).data('descricao') gets the value of the named date attribute of the description

See in practice:

$('body').on('change', '#mySelect', function() {
  $('#txtValue').val($(this).val());
  $('#txtText').val($("option:selected", this).text());
  $('#txtData').val($("option:selected", this).data('descricao'))
});

$('#mySelect').trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="1" data-descricao="Descrição 1">Valor 1</option>
  <option value="2" data-descricao="Descrição 2">Valor 2</option>
</select>
<p>Value:<input readonly="" type="text" id="txtValue"></p>
<p>Text:<input readonly="" type="text" id="txtText"></p>
<p>Data:<input readonly="" type="text" id="txtData"></p>