How to change the select text after an option is chosen?

Asked

Viewed 1,678 times

3

I am making an application in which the user must select his ddi. The ddi are in a select thus:

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

I put two example lines, there are several. I would like when the user selected the country, for example, Brazil what appeared after selected was the 55 and not the text Brazil. I hope I can explain.

javascript html
  • 2

    Hello @lufizi! How is your Javascript? Do you want select to display the name of the Parent while choosing and then switching to the number? or where you want to show this 55?

  • 4

    What’s the matter with something like <option value="55" id="bra">55 - Brasil</option> ?

2 answers

2


You can do it like this:

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>

2nd Way (suggested by @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: I don’t think this is the best solution to your problem, but for the way you described it, this will help.

OBS2: I think the way that @Lucascosta mentioned in the comment is better!

  • 2

    Hello, For what was exposed I think the answer is fine, but I would change one thing in logic. When selecting the option, change the option Select to the number and so the list of countries was always intact.

  • @Tiagogomes makes sense, I’ll put as a second form!

  • It worked, thank you very much!

2

I don’t know if I understand exactly your demand, but below is a functional example and 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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.