Fill inputs with selected option value
Llena los valores de distintos inputs al cambiar un combo select
HTML
<label for="mac">Elija un modelo de <strong>Mac:</strong></label>
<select id="mac">
<option value="">-- selecciona una opción --</option>
<option value="imac21">iMac 21"</option>
<option value="imac27">iMac 27"</option>
<option value="imac27R">iMac 27" con pantalla retina</option>
</select>
<hr>
<form>
<label for="precio">Precio</label>
<input type="text" id="precio" name="precio">
<label for="pantalla">Pantalla</label>
<input type="text" id="pantalla" name="pantalla">
<label for="procesador">Procesador</label>
<input type="text" id="procesador" name="procesador">
<label for="memoria">Memoria</label>
<input type="text" id="memoria" name="memoria">
<label for="almacenamiento">Almacenamiento</label>
<input type="text" id="almacenamiento" name="almacenamiento">
<label for="graficos">Gráficos</label>
<input type="text" id="graficos" name="graficos">
</form>
CSS
label {
display: block;
}
JavaScript
//Modelo de datos tipo JSON
var macModels = {
"imac21" : {
precio : "$17,999",
pantalla : "21 pulgadas",
procesador : "1.4 Ghz",
memoria : "8Gb (integrada)",
almacenamiento : "500 Gb",
graficos : "Intel HD Graphics 5000"
},
"imac27" : {
precio : "$21,499",
pantalla : "27 pulgadas",
procesador : "2.7 Ghz",
memoria : "8Gb (2 modulos)",
almacenamiento : "1 Tb",
graficos : "Intel Iris Pro Graphics"
},
"imac27R" : {
precio : "$32,999",
pantalla : "27 pulgadas",
procesador : "3.4 Ghz",
memoria : "8Gb (2 modulos)",
almacenamiento : "1 Tb",
graficos : "NVIDIA GeForce GTX 775M"
}
};
//variable para el modelo elegido
var modelSelected;
$(document).ready(function(){ //se ejecuta al cargar la página (OBLIGATORIO)
$("#mac").on("change", function(){ //se ejecuta al cambiar valor del select
modelSelected = $(this).val(); //Asignamos el valor seleccionado
if(modelSelected != ""){ //Si tiene un valor llenamos los campos 1 x 1
$("#precio").val(macModels[modelSelected].precio);
$("#pantalla").val(macModels[modelSelected].pantalla);
$("#procesador").val(macModels[modelSelected].procesador);
$("#memoria").val(macModels[modelSelected].memoria);
$("#almacenamiento").val(macModels[modelSelected].almacenamiento);
$("#graficos").val(macModels[modelSelected].graficos);
} else { //Si escogieron una opcion no valida ponemos los campos en blanco
$("#precio").val("");
$("#pantalla").val("");
$("#procesador").val("");
$("#memoria").val("");
$("#almacenamiento").val("");
$("#graficos").val("");
...