Tengo un dropdwon el cual muestra como opciones los campos de una tabla en mysql, hasta aqui todo bien. También tengo 2 inputs los cuales quiero que se llenen según lo que se elija en el dropdown. La información con la que quiero que se llenen estos inputs son datos del mismo registro que se haya seleccionado en el dropdown.
La tabla se llama oferentes en mysql, en el dropdown se muestra el id de cada oferente y en un input quiero se muestre el nombre y en el otro input la nacionalidad. Todo esto dependiendo del id que seleccione.
Este es el php en el que se muestran el dropdown y los inputs:
$query = 'SELECT * FROM oferentes';
$result = $mysqli->query($query);
?>
<div class="row ">
<div class="input-field col s12 m10 l10">
<p style="text-align:left;"> ID del Oferente:</p>
<select id="IDOferente" class="browser-default col s12 m10 l10" name="IDOferente" onchange="pruebita2()">
<option value="" disabled selected>Seleccione el ID del Oferente</option>
<?php
while ( $row = $result->fetch_array() )
{
?>
<option value=" <?php echo $row['ID_Oferente'] ?> "
data-nombre="<?php echo $row['NombreOferente'] ?>"
data-nacionalidad="<?php echo $row['Nacionalidad'] ?>">
<?php echo $row['ID_Oferente']; ?>
</option>
<?php
}
?>
</select>
</div>
</div>
<div class="row">
<div class="input-field col s12 m10 l10">
<i class="material-icons prefix">folder_shared</i>
<input id="nombre" type="text" name="nombre" class="validate" required>
<label for="nombre">Nombre Oferente</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m10 l10">
<i class="material-icons prefix">textsms</i>
<input id="nacionalidad" type="text" name="nacionalidad" class="validate" required>
<label for="nacionalidad">Nacionalidad</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m10 l10">
<select class="browser-default" type="hidden" id="TipoOferente" name="TipoOferente" required>
<option value="" disabled selected>Seleccione el tipo de Oferente</option>
<option value="Individual">Individual</option>
<option value="Consorcio">Consorcio</option>
</select>
</div>
</div>
<script >
window.onload = function(){
var select = document.getElementById("IDOferente");
select.addEvenListener("change", function(){
var nombre = select.options[select.selectedIndex].dataset.nombre;
var nacionalidad = select.options[select.selectedIndex].dataset.nacionalidad;
document.getElementById("nombre").value = nombre;
document.getElementById("nacionalidad").value = nacionalidad;
}
}
</script>