1

Tenho em minha view um select que recebe os dados das funções e as lista.

<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>

Fora o id e o nome, recebo também a descrição das funções. Como posso fazer para carregar a descrição da função selecionada em um textfield?

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

Não acho que seja preciso usar ajax para buscar novamente o valor uma vez que já tenho ele carregado, mas me falta conhecimento e não consegui um termo para buscar uma solução na web.

Esses são os dados que eu recebo da função:

inserir a descrição da imagem aqui

Quando for selecionado "Oficial General..." quero mostar a descrição no textfield.

2
  • Você utiliza jQuery em seu projeto? Pode ser feita uma solução com jQuery ou Javascript puro mesmo. 15/01/2016 às 12:51
  • Utilizo jQuery sim. 15/01/2016 às 12:53

1 Resposta 1

2

Atribuir a descrição em seus options

Como você já está utilizando o valor e o texto do option, você pode criar um atributo adicional no option. Veja data-*

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

Atribuir o valor selecionado ao input

Adicione o evento on change ao select e obtenha o valor do option selecionado ou o texto e atribua ao input.

  • .val() obtém o value do option selecionado
  • $("option:selected", this).text() obtém o texto do option selecionado
  • $("option:selected", this).data('descricao') obtém o valor do atributo data nomeado de descricao

Veja na prática:

$('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>

4
  • Então, mas no caso eu estaria exibindo no nome da função no campo descrição, e não é bem isso que eu quero. Eu recebo id, nome e descrição da função, e é a descrição que eu quero mostrar lá no textfield e não o nome. 15/01/2016 às 13:11
  • Acredito que eu tenha que jogar o {{ $mfuncao->descricao}} em algum lugar do select ou do option para mandar ele pro textfield depois, mas não sei como. 15/01/2016 às 13:11
  • Você pode criar o atributo data-* para salvar qualquer outra informação nos options. Veja o exemplo editado utilizando esse atributo. 15/01/2016 às 13:19
  • 1
    Show!! exatamente isso, muito obrigado! 15/01/2016 às 13:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .