3

Estou fazendo uma aplicação em que o usuário deve selecionar o seu ddi. Os ddi estão num select dessa forma:

<select name="paises" id="ddi">
     <option value="55" id="bra">Brasil</option>
     <option value="1" id="eua">Eua</option>
</select>

Coloquei duas linhas apenas de exemplo, são várias. Gostaria que quando o usuário selecionasse o país, por exemplo, Brasil o que aparecesse após selecionado fosse o 55 e não o text Brasil. Espero ter conseguindo explicar.

2
  • 2
    Olá @lufizi! Como está o teu JavaScript? Queres que o select mostre o nome do Pais enquanto escolhes e depois de escolhido mude para o numero? ou onde queres mostrar esse 55?
    – Sergio
    Commented 28/12/2016 às 12:16
  • 4
    Qual o problema com algo como <option value="55" id="bra">55 - Brasil</option> ?
    – BrTkCa
    Commented 28/12/2016 às 12:21

2 Respostas 2

2

Você pode fazer assim:

ddi.onchange = function() {
  var option = this.querySelector('option:checked');
  option.setAttribute('data-name', option.innerHTML); //essa parte é opcional caso você não queira voltar com os nomes
  option.innerHTML = option.value;
  
  // Voltar com o valor original dos outros campos (essa parte é opcional caso você não queira voltar com os nomes)
  this.querySelectorAll('option:not(:checked)').forEach(function(option) {
      var name = option.getAttribute('data-name');
      if(name) option.innerHTML = name;
  });
  //
}
<select name="paises" id="ddi">
  <option value="" disabled selected>Selecione</option>
  <option value="55">Brasil</option>
  <option value="1">Eua</option>
</select>

2º Forma (sugerida pelo @TiagoGomes)

ddi.onchange = function() {
  var selectedOption = this.querySelector('option:checked');
  
  displayValue.innerHTML = selectedOption.value;
  displayValue.value = selectedOption.value;
  this.value = selectedOption.value;
}
<select name="paises" id="ddi">
  <option id="displayValue" value="" selected disabled>Selecione</option>
  <option value="55">Brasil</option>
  <option value="1">Eua</option>
</select>

OBS1: Não acho que essa seja a melhor solução para o seu problema, mas para o jeito que você descreveu, isso vai ajudar.

OBS2: Acho que a forma que o @LucasCosta mencionou no comentário fica melhor!

3
  • 2
    Olá, Para o que foi exposto acho que a resposta está bem, mas trocaria uma coisa na logica. Quando selecionar a opção, alterar a option Selecione para o numero e assim a lista dos paises ficava sempre intacta. Commented 28/12/2016 às 12:43
  • @TiagoGomes faz sentido, vou colocar como uma segunda forma! Commented 28/12/2016 às 12:47
  • Funcionou, muito obrigada!
    – lufizi
    Commented 28/12/2016 às 13:44
2

Não sei se entendi exatamente a sua demanda, mas segue abaixo um exemplo funcional e jQuery.

// id do select
var objeto = $("#ddi");

// salva o texto atual para poder ser recuperado
$.each($(objeto).children('option'), function(){
  console.log($(this).text());
  $(this).attr('des', $(this).text());
});
$("#ddi option:selected").text('+' + $('#ddi').val()); // marca o selecionado


// ao mudar a seleção (pode ser ao perder o foco ou da forma que preferir)
$('#ddi').change(function(){
  $("#ddi option").text($("#ddi option").attr('des'));
  $("#ddi option:selected").text('+' + $('#ddi').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="paises" id="ddi">
         <option value="55"  id="bra">Brasil</option>
         <option value="1"  id="eua">Eua</option>
</select>

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 .