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).
¿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.
