1

<div class="col-sm-6">
                <div class="inputBox">
                  <div class="inputText">*Puesto</div>
                     <select class="input"  name="puesto" required>
                      <option value="" disabled selected></option>
                      <option value="1">Gerente</option>
                      <option value="2">Vendedor</option>
                      <option value="3">Vendedor Comisionista</option>
                    </select>
                </div>
              </div>
              </div>

Hay alguna manera de rellenar automáticamente un campo con los datos de ese select?.

Por ejemplo si yo escojo gerente que un input text se llene solo con la palabra gerente; esto porque los datos que me guarda son los del value y no los de gerente...,etc.

Me dirán que cambie los datos del value pero necesito los dos datos.

2
  • 1
    si con onchange creo que se puede Commented el 9 dic. 2019 a las 18:43
  • Tienes el dato exacto de como, amigo? Commented el 9 dic. 2019 a las 18:45

4 respuestas 4

2

Utilizando jQuery es posible, en donde detectamos el cambio en el select y le asignamos al input

$(document).on("change","#puesto",function(e){
  var txt=$("#puesto option:selected").text();
  $("#texto").val(txt);
})
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="col-sm-6">
        <div class="inputBox">
          <div class="inputText">*Puesto</div>
             <select id="puesto" class="input"  name="puesto" required>
              <option value="" disabled selected></option>
              <option value="1">Gerente</option>
              <option value="2">Vendedor</option>
              <option value="3">Vendedor Comisionista</option>
            </select>
        </div>
        <br>
        Mostrando en un input
        <br>
        <input id="texto" type="text" />
      </div>
</body>
</html>

1

Con jQuery es muy sencillo usando text() asi:

$(".puesto").on("change", function() {
  $("#puesto").val($("option:selected", this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
                <div class="inputBox">
                  <div class="inputText">*Puesto</div>
                     <select class="input puesto"  name="puesto" required>
                      <option value="" disabled selected></option>
                      <option value="1">Gerente</option>
                      <option value="2">Vendedor</option>
                      <option value="3">Vendedor Comisionista</option>
                    </select>
                    <input id="puesto">
                </div>
              </div>
              </div>

1

Si necesitas los dos valores tanto el value como el texto de la opción con JS puro tomas el valor con value y su texto con innerHTML, cualquier duda hazla saber.

const puesto = document.getElementById('puesto');


puesto.addEventListener('change', (e)=>{
console.log(`Esto es el texto: ${puesto.options[puesto.selectedIndex].innerHTML} y este su valor: ${puesto.options[puesto.selectedIndex].value} `);

})
<select class="input" id="puesto"  name="puesto" required>
                      <option value="" disabled selected></option>
                      <option value="1">Gerente</option>
                      <option value="2">Vendedor</option>
                      <option value="3">Vendedor Comisionista</option>
                    </select>

0

¿ Y por qué no añades los dos como value ?

<div class="col-sm-6">
    <div class="inputBox">
        <div class="inputText">*Puesto</div>
                <select class="input"  name="puesto" required>
                <option value="" disabled selected></option>
                <option value="1:gerente">Gerente</option>
                <option value="2:vendedor">Vendedor</option>
                <option value="3:comisionista">Vendedor Comisionista</option>
            </select>
        </div>
    </div>
</div>

Luego, desde PHP, obtienes ambos datos:

<?php
list($id, $puesto) = explode(':', $_POST['puesto']);

O también puedes obtener ambos desde javascript:

var value = document.getElementByName('puesto').value.split(':');
var id = value[0];
var puesto = value[1];
2
  • El OP aclara en su pregunta que no le vale cambiar los datos del value.
    – DjCrazy
    Commented el 9 dic. 2019 a las 19:37
  • Quizás lo entendí mal, pero yo entiendo que se refiere a no poner las etiquetas como value. Ya que haciendo eso también le haría falta el id de las etiquetas. De la forma que propongo tiene los dos valores que es lo que él necesita. Commented el 9 dic. 2019 a las 19:54

Tu Respuesta

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

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