Crear cuenta
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario con Campos Select</title>
</head>
<body>
<form>
<label for="select1">Select 1:</label>
<select id="select1" onchange="updateInput('select1')">
<option value=""></option>
<option value="opcion1">Opción 1</option>
<option value="opcion2">Opción 2</option>
<option value="opcion3">Opción 3</option>
<option value="opcion4">Opción 4</option>
</select>
<label for="select2">Select 2:</label>
<select id="select2" onchange="updateInput('select2')">
<option value=""></option>
<option value="opcion5">Opción 5</option>
<option value="opcion6">Opción 6</option>
<option value="opcion7">Opción 7</option>
<option value="opcion8">Opción 8</option>
</select>
<label for="select3">Select 3:</label>
<select id="select3" onchange="updateInput('select3')">
<option value=""></option>
<option value="opcion9">Opción 9</option>
<option value="opcion10">Opción 10</option>
<option value="opcion11">Opción 11</option>
<option value="opcion12">Opción 12</option>
</select>
<label for="select4">Select 4:</label>
<select id="select4" onchange="updateInput('select4')">
<option value=""></option>
<option value="opcion13">Opción 13</option>
<option value="opcion14">Opción 14</option>
<option value="opcion15">Opción 15</option>
<option value="opcion16">Opción 16</option>
</select>
<label for="resultInput">Resultado:</label>
<input type="text" id="resultInput" readonly>
</form>
<script>
function updateInput(selectId) {
// Obtener el valor seleccionado del selectvar selectedValue = document.getElementById(selectId).value;
// Actualizar el valor del campo de entradadocument.getElementById('resultInput').value += selectedValue + ' ';
}</script>
</body>
</html>
<script>
// Mantener un registro de elementos seleccionadoslet selectedElements = {};
function updateInput(selectId) {
// Actualizar el valor del campo de entrada en el objetoselectedElements[selectId] = document.getElementById(selectId).value;
// Actualizar el valor del campo de entradadocument.getElementById('resultInput').value = Object.values(selectedElements).join(' ');
}</script>
<label for="input1">Input 1:</label>
<input type="text" id="input1" onchange="updateInput('input1')">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
.texy { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}</style>
</head>
<body>
<span class="texy2" style="float:left;" >
<select style="font-size:10px; text-align:left" name="dir1" class='mi-selector' id="dir1" onchange="updateInput('dir1')" required="required">
<option value=""></option>
<option value="CL">CALLE</option>
<option value="CR">CARRERA</option>
<option value="AV">AVENIDA</option>
<option value="DG">DIAGONAL</option>
</select>
<input name="dir2" type="text" required="required" id="dir2" style="text-align:center; width:40px" value="" size="5" onchange="updateInput('dir2')" onkeypress="return valideKey(event);" />
<select style="font-size:10px; text-align:left; width:60px" name="dir3" class='mi-selector' id="dir3" onchange="updateInput('dir3')">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select style="font-size:10px; text-align:left" name="dir4" class='mi-selector' id="dir4" required="required" onchange="updateInput('dir4')">
<option value=""> </option>
<option value="#">#</option>
<option value="CL">CALLE</option>
<option value="CR">CARRERA</option>
<option value="AV">AVENIDA</option>
</select>
<input name="dir5"type="text" required="required" id="dir5" style="text-align:center; width:40px" value="" size="5" onkeypress="return valideKey(event);" onchange="updateInput('dir5')" />
<select style="font-size:10px; text-align:left;width:60px" name="dir6" class='mi-selector' id="dir6" onchange="updateInput('dir6')">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
- </span><span class="texy2" style="float:left;">
<input name="dir7"type="text" id="dir7" style="text-align:center; width:50px" value="" size="5" onkeypress="return valideKey(event);" onchange="updateInput('dir7')" />
</span><br />
<span class="texy">
<br />
<input name="dircompleta" type="text" id="dircompleta" value="" size="80" readonly="readonly" />
<script>
// Mantener un registro de elementos seleccionadoslet selectedElements = {};
function updateInput(selectId) {
// Actualizar el valor del campo de entrada en el objetoselectedElements[selectId] = document.getElementById(selectId).value;
// Actualizar el valor del campo de entradadocument.getElementById('dircompleta').value = Object.values(selectedElements).join(' ');
}</script>
</span>
</body>
</html>
<script>
let selectedElements = {}; // Registro de datos
let orden = ['dir1', 'dir2', 'dir3', 'dir4', 'dir5', 'dir6', 'dir7']; // Orden de visionado
// Obtenemos los datosfunction updateInput(selectId) {
// Captura el valor del campolet itemValue = document.getElementById(selectId).value;
// Comprobamos si es dir7if (selectId === 'dir7') {
// Si esta vacío borramos, si tiene valor añadimos guiónif (itemValue === '') delete selectedElements[selectId];
else selectedElements[selectId] = '- ' + itemValue;
// En el resto de casos añadimos valor} else selectedElements[selectId] = itemValue;
// Resultado visual ordenadolet visualResult = [];
// Obtenemos los datos en ordenfor (let id of orden) {
// Si existe el índice añadimosif (selectedElements[id]) {
visualResult.push(selectedElements[id]);
} } // Actualiza el valor del campo de salidadocument.getElementById('dircompleta').value = Object.values(visualResult).join(' ');
}</script>