1

Tengo el siguiente código donde deseo seleccionar el value y text de un select, y esos valores enviarlos a unos 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="">

No logro poder seleccionar el text

1
  • O sea Maquina 1 o Maquina 2?
    – Kleith
    el 6 jun. 2018 a las 19:23

3 respuestas 3

5

para seleccionar el texto del option seleccionado debes seleccionar dicho option y luego capturar su contenido con el método .text().

En tu código solo tengo una observación y es que si estás usando jQuery lo uses lo mas que puedas, para que utilizar selectores de JavaScript nativo ?

Acá te dejo un ejemplo del código funcional:

$("#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="">

1
  • 1
    Muchas gracias!
    – MoteCL
    el 6 jun. 2018 a las 20:04
1

Podrías obtenerlo de la siguiente manera:

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

1
  • Al fin logre hacerlo con tu ejemplo, funciona a la perfección!
    – KilzaNiko
    el 18 nov. 2019 a las 6:15
0

Para obtener el "innerHtml" del option seleccionado hay muchas maneras, espero darte una guía con el siguiente código.

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!
};

En resumen, obtenemos el elemento select a través de su ID, luego sacamos las options a modo de arreglo con el 'getElementsByTagName' y del arreglo seleccionamos el que tiene como índice el que fue seleccionado a través del atributo "selectedIndex"

Hay muchas formas de hacerlo, esta solo es una que creo que es simple para lo que necesitas implementar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.