Me gustó mucho la solución por @Marko Dunic, pero no cumplió con mis necesidades para la fijación de los ID de las opciones. Una vez que adjunté las ID, me di cuenta de que podía hacer que el código JS fuera aún más pequeño y simple. Mi solución está diseñada para cuando los datos provienen de una base de datos relacional y los datos de entrada de JSON conservan la estructura relacional con claves primarias/externas. Estos son los datos JSON:
<html lang="en">
<head>
<title>Populate a select dropdown list with jQuery - WebDev Ingredients</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
var types = [
{ typeID: 1, name: 'Domestic'},
{ typeID: 2, name: 'Import'},
{ typeID: 3, name: 'Boat'}
]
var makes = [
{ typeID: 1, makeID: 1, name: 'Chevy'},
{ typeID: 1, makeID: 2, name: 'Ford'},
{ typeID: 1, makeID: 3, name: 'Delorean'},
{ typeID: 2, makeID: 4, name: 'Honda'},
{ typeID: 2, makeID: 5, name: 'Toyota'},
{ typeID: 2, makeID: 6, name: 'Saab'}
]
var model = [
{ makeID: 1, modelID: 1, name: 'Camaro'},
{ makeID: 1, modelID: 2, name: 'Chevelle'},
{ makeID: 1, modelID: 3, name: 'Nova'},
{ makeID: 2, modelID: 4, name: 'Focus'},
{ makeID: 2, modelID: 5, name: 'Galaxie'},
{ makeID: 2, modelID: 6, name: 'Mustang'},
{ makeID: 4, modelID: 7, name: 'Accord'},
{ makeID: 4, modelID: 8, name: 'Civic'},
{ makeID: 4, modelID: 9, name: 'Odyssey'},
{ makeID: 5, modelID: 10, name: 'Camry'},
{ makeID: 5, modelID: 11, name: 'Corolla'}
]
//
// Put this in a stand alone .js file
//
// returns array of elements whose 'prop' property is 'value'
function filterByProperty(arr, prop, value) {
return $.grep(arr, function (item) { return item[prop] == value });
}
// populates select list from array of items given as objects: { name: 'text', value: 'value' }
function populateSelect(el, items) {
el.options.length = 0;
if (items.length > 0)
el.options[0] = new Option('please select', '');
$.each(items, function() {
el.options[el.options.length] = new Option(this.name, this.value);
});
}
// initialization
$(document).ready(function() {
// populating 1st select list
populateSelect($('#sType').get(0), $.map(types, function(type) { return { name: type.name, value: type.typeID} }));
// populating 2nd select list
$('#sType').bind('change', function() {
var theModels = filterByProperty(makes, 'typeID', this.value);
populateSelect($('#sMake').get(0), $.map(theModels, function(make) { return { name: make.name, value: make.makeID} }));
$('#sMake').trigger('change');
});
// populating 3nd select list
$('#sMake').bind('change', function() {
var theSeries = filterByProperty(model, 'makeID', this.value);
populateSelect($('#sModel').get(0), $.map(theSeries, function(model) { return { name: model.name, value: model.modelID} }));
});
});
</script>
</head>
<body>
Enter values, click submit, and look at the post parameters
<form method="get" action="index.php">
<div id="selection">
<select id="sType" name="type_id" style="{width=75px}"></select>
<select id="sMake" name="make_id" style="{width=75px}"></select>
<select id="sModel" name="model_id" style="{width=75px}"></select>
</div>
<input type="submit">
</form>
</body>
</html>
en cuenta que mi solución desplaza la funcionalidad para que Maquillaje Modelo son la segunda y cuadros de texto 3º, y el tipo (nacional, importación, barco, etc.) son el 1er nivel.Obtuve el texto estándar JS en 23 líneas (menos comentarios) conservando un buen formato.
Los datos JSON son muy fáciles de representar a partir de las consultas SQL, que se almacenan en caché en las listas java en init porque el Type-Make-Model rara vez cambia. No uso ningún AJAX dinámico porque eso complica la arquitectura, y tengo una lista relativamente pequeña de valores disponibles, así que simplemente la envío a la solicitud de la página.
"Las soluciones deben ser una simple posible, pero no más simple" - A. Einstein
gracias por el esfuerzo que puso en su respuesta. Probé tu código y funcionó, pero no tengo tiempo ahora mismo para saber exactamente cómo funciona ... volveré más tarde ... pero estoy usando la estructura de matriz ... y creo que ahora entender cómo crear estas matrices. Gracias de nuevo –
La estructura de datos es en realidad un objeto Javascript. Puede encontrar aquí un tutorial JSON decente: http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29 – BalusC
El uso de $ .grep y $ .map para esto es solo el trazo maestro. Fantástica solución, acabo de usarlo como base para algo similar y me siento mejor programador para eso. Impresionante solución. – hendrixski