How to get the text of a select

1

I have the following code where I want to select the value and text of a select, and those values send them to some inputs

var $select = $("#id_maquinaria").change(function() {
            var x = $select.val();

            document.getElementById('area').value = x;

        });
<select class="" name="" id="id_maquinaria">
  <option value="1">Maquina 1</option>
  <option value="2">Maquina 2</option>
</select>
<br>
<input type="text" name="area" id="area" value="">
<br>
<input type="text" name="maquina" id="maquina" value="">

I can not select the text

    
asked by MoteCL 06.06.2018 в 21:21
source

3 answers

4

to select the text of option selected you must select said option and then capture its content with the .text() method.

In your code I only have one observation: if you are using jQuery , do you use it as much as possible, so that you can use JavaScript native selectors?

Here I leave an example of the functional code:

$("#id_maquinaria").change(function() {
  var valor = $(this).val(); // Capturamos el valor del select
  var texto = $(this).find('option:selected').text(); // Capturamos el texto del option seleccionado

  $("#area").val(valor);
  $("#maquina").val(texto);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="" name="" id="id_maquinaria">
  <option value="">Seleccionar máquina</option>
  <option value="1">Maquina 1</option>
  <option value="2">Maquina 2</option>
</select>
<br>
<input type="text" name="area" id="area" value="">
<br>
<input type="text" name="maquina" id="maquina" value="">
    
answered by 06.06.2018 / 21:27
source
0

To obtain the "innerHtml" of the selected option there are many ways, I hope to give you a guide with the following code.

select = document.getElementById("id_maquinaria");
select.onchange = function(){ // Podemos crear una función que reaccione cuando cambia el valor del select como prueba.
    console.log(this.value); //regresa el value del option seleccionado
    console.log(this.innerHTML); //regresa el select completo con todas sus opciones
    //Si no lo quieres usar dentro de una función podrías usar la variable que ya creamos de 'select' en lugar de 'this'
    var options = this.getElementsByTagName("option"); //Te regresa un arrego con todos los options de tu select
    var optionHTML = options[this.selectedIndex].innerHTML;  //Te regresa el innetHTML (Maquina 1 o Maquina 2) del option seleccionado
    console.log(optionHTML); //Aquí te queda para quelo uses como gustes!
};

In summary, we obtain the element select through its ID, then we extract the options as an arrangement with the 'getElementsByTagName' and from the array we select the one with the index that was selected through the attribute "selectedIndex"

There are many ways to do it, this is just one that I think is simple for what you need to implement.

    
answered by 06.06.2018 в 21:31
0

You could get it as follows:

var $select = $("#id_maquinaria").change(function() {
  // obtengo el value
  var value = $(this).val();
  // obtengo el texto segun el value
  var text = $select.find('option[value=' + value + ']').text();
  
  // imprime el seleccionado
  console.log(value, text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="" name="" id="id_maquinaria">
  <option value="1">Maquina 1</option>
  <option value="2">Maquina 2</option>
</select>
<br>
<input type="text" name="area" id="area" value="">
<br>
<input type="text" name="maquina" id="maquina" value="">
    
answered by 06.06.2018 в 21:32