Select option from a select

Question

Select option from a select

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (1 votes)

4

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 case it would appear August, in the project use jquery if it facilitates.

Unsure what I'd like the result to look like:

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

javascript html jquery

asked by anonymous 10.02.2017 / 16:42

3 answers

3

GETELEMENTSBYTAGNAME INSIDE ANOTHER ELEMENT

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

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><selectid="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>

10.02.2017 / 16:49

1

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 the value of select:

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

To select a select from your option through the description of select:

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

10.02.2017 / 16:49

Is it possible for a program to modify its own code? How to stylize the p tag differently?

score 4 · Accepted Answer

From what I understand, your problem is simpler than it sounds. I understand that you want to select a option by value.

Your were missing you assign the month variable in 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>