Select option from a select

Question

I have the following HTML:

<select id="faturamento-mes-referencia">
    <option value="1">Janeiro</option>
    <option value="2">Fevereiro</option>
    <option value="3">Março</option>
    <option value="4">Abril</option>
    <option value="5">Maio</option>
    <option value="6">Junho</option>
    <option value="7">Julho</option>
    <option value="8">Agosto</option>
    <option value="9">Setembro</option>
    <option value="10">Outubro</option>
    <option value="11">Novembro</option>
    <option value="12">Dezembro</option>
</select>

And javascript:

var mes = 8;
document.getElementById('faturamento-mes-referencia');

I would like to select the option that has value="8" based on my variable that is dynamic and in the case would appear August, in the project use jquery if facilitate.

Taking doubts would like the result so:

<select id="faturamento-mes-referencia">
    <option value="1">Janeiro</option>
    <option value="2">Fevereiro</option>
    <option value="3">Março</option>
    <option value="4">Abril</option>
    <option value="5">Maio</option>
    <option value="6">Junho</option>
    <option value="7">Julho</option>
    <option value="8" selected>Agosto</option>
    <option value="9">Setembro</option>
    <option value="10">Outubro</option>
    <option value="11">Novembro</option>
    <option value="12">Dezembro</option>
</select>

Answer 1

From what I understand your problem is simpler than it seems. I understood that you want to select a option at value.

Your missed you assign the month variable on value.

See working:

var mes = 8;
document.getElementById('faturamento-mes-referencia').value = mes;

<select id="faturamento-mes-referencia">
    <option value="1">Janeiro</option>                           
    <option value="2">Fevereiro</option>                           
    <option value="3">Março</option>                           
    <option value="4">Abril</option>                           
    <option value="5">Maio</option>                           
    <option value="6">Junho</option>                           
    <option value="7">Julho</option>                           
    <option value="8">Agosto</option>                           
    <option value="9">Setembro</option>                           
    <option value="10">Outubro</option>                           
    <option value="11">Novembro</option>                           
    <option value="12">Dezembro</option>                           
</select>

Answer 2

GETELEMENTSBYTAGNAME INSIDE ANOTHER ELEMENT

In pure javascript it is necessary to select only the <option> within the <select> with the ID set and find its value if there is no NULL return:

function selecionarTexto(elementId, cod) {
    var elt = document.getElementById(elementId);
    var opt = elt.getElementsByTagName("option");
    for(var i = 0; i < opt.length; i++) {
      if(opt[i].value == cod) {
        alert(opt[i].text);
        elt.value = cod;
      }
    }
  return null;
}

// Se quiser utilizar jQuery fica assim:  
function testeComJquery(val) {
  alert($("#faturamento-mes-referencia option[value="+val+"]").text());
  return $("#faturamento-mes-referencia").val(val);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectErrado">
  <option value="1">Erro</option>                           
  <option value="2">Erro</option>                         
  <option value="4">Erro</option>                        
  <option value="5">Erro</option>   
</select>

<select id="faturamento-mes-referencia">
  <option value="1">Janeiro</option>                           
  <option value="2">Fevereiro</option>                         
  <option value="4">Abril</option>                        
  <option value="6">Junho</option>                           
  <option value="7">Julho</option>                           
  <option value="8">Agosto</option>                           
  <option value="9">Setembro</option>                           
  <option value="10">Outubro</option>                           
  <option value="11">Novembro</option>                           
  <option value="12">Dezembro</option>                           
</select>

<p><button onclick="selecionarTexto('faturamento-mes-referencia', 4)">TESTE</button> - Vai selecionar sempre Abril</p>

<p><button onclick="testeComJquery(7)">TESTE JQUERY</button> - Vai selecionar sempre Julho</p>

Answer 3

To get the description of the selected select:

$("#faturamento-mes-referencia option:selected").text();

To get the value of the selected select:

$("#faturamento-mes-referencia").val();

To select a select from your option through select value:

$("#faturamento-mes-referencia").val(8); //(Agosto)

To select a select from your option via the select description:

var text1 = 'Agosto';
$("#faturamento-mes-referencia option").filter(function() {
    return this.text == text1; 
}).attr('selected', true);