Enviar de SELECT a INPUT: Ejemplo completo

Enviar de SELECT a INPUT. En este artículo veremos cómo pasar información de un SELECT a INPUT a través de un atributo personalizado haciendo uso de la librería jQuery y JavaScript.

Hay varias formas de manejar la etiqueta SELECT y es a través de la función onchange. Sin embargo, la idea es obtener el atributo personalizado de la opción de la lista desplegable (SELECT) y establecer el valor para ser enviado a otra entrada. tipo texto (INPUT).

Enviar de SELECT a INPUT

Enviar de SELECT a INPUT

¿Cuál sería la solución de Enviar de SELECT a INPUT?

LA solución sería crear un atributo personalizado con el nombre de data-typeid. Sin embargo, este atributo se agregará en las opciones del SEELCT (option), no en el select

Una vez declarado el atributo podemos leerlo con jQuery y pasar los valores de ese atributo a un input sin problemas.

También tenga en cuenta que los on*atributos están muy desactualizados. Debería utilizar controladores de eventos discretos, algo como esto:

Pasos para Enviar de SELECT a INPUT

Creamos la variable que leerá el atributo del SEELCT haciendo uso del método ATTR()

var type_id = $('select option:selected').attr('data-typeid');

Asignamos la variable al cuadro de entrada para que almacene la información enviada del select:

document.getElementById("money").value =type_id;

Entonces, mostramos toda la función actualizada y se vería así:

function selectFunction(e) {
var type_id = $('select option:selected').attr('data-typeid'); //to get value
document.getElementById("money").value =type_id;
}

Código jQuery completo

$(function() {
$('select.form-control').change(function() {
var typeId = $(this).find('option:selected').data('typeid');
$("#money").val(typeId);
}).change();
});

Script HTML completo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>

<input type="number" value="" id="money" class="form-control">

Segunda forma

Deshabilitando la primera opción de la etiqueta SELECT usando DISABLED de HTML. Por último, también este ejemplo es factible para lograr nuestro objetivo de pasar datos desde un select hacia una etiqueta de tipo input.
Script jQuery

$(document).on('change', 'select.form-control', function() {
var r = $('select.form-control option[value="'+$(this).val()+'"]').attr("data-typeid")
$("#money").val(r)
});

Script HTML

Declaramos la librería jQuery en la etiqueta head y también el formulario HTML que contiene la etiqueta SELECT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option selected disabled>-- Select one --</option>
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>

<input type="number" value="" id="money" class="form-control">

Código completo

Les dejare el script completo para que puedan probarlo en sus servidores y vean la eficacia de este script. Además, es muy importante declarar la librería del jQuery

<!doctype html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option selected="" disabled="">-- Selecciona --</option>
<option data-typeid="1111" value="courseId1">Curso 01</option>
<option data-typeid="2222" value="courseId2">Curso 02</option>
</select>
<input type="number" value="" id="money" class="form-control">
<script type="text/javascript">
$(document).on('change', 'select.form-control', function() {
var r = $('select.form-control option[value="'+$(this).val()+'"]').attr("data-typeid")
$("#money").val(r)
});
</script>
</body>
</html>

Conclusión

En algunos casos suele ser un problema para los programadores cuando se desea guardar información a MySQL desde la etiqueta select, Por ejemplo, cuando se desea guardar el ID y el nombre u otro valor.

Con esta estrategia se hace más llevadero el manejo de la información, haciendo uso de la librería jQuery y JavaScript que como recordamos trabaja en el lado del cliente (navegador web).

Espero que esta explicación les ayude en sus proyectos que estén realizando.

Estaremos encantados de escuchar lo que piensas

Deje una respuesta

BaulCode
Logo