J'ai vraiment aimé la solution par @Marko Dunic, mais il n'a pas répondu à mes besoins pour fixer les ID des options. Une fois que j'ai joint les identifiants, j'ai réalisé que je pourrais rendre le code JS encore plus petit et plus simple. Ma solution est conçue lorsque les données proviennent d'une base de données relationnelle et que les données d'entrée JSON conservent la structure relationnelle avec les clés primaires/étrangères. Voici les données 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>
Notez que ma solution déplace la fonctionnalité de sorte que Make-modèle sont les 2e et 3e zones de texte, et le type (national, importation, bateau, etc.) sont le 1er niveau.J'ai réduit la JS à 23 lignes (moins de commentaires) tout en conservant un bon formatage.
Les données JSON est très facile de rendre des requêtes SQL, qui sont mises en cache en Java sur les listes d'initialisation parce que le type Make-modèle changent rarement. Je ne pas utiliser AJAX dynamique, car cela complique l'architecture, et j'ai une liste relativement faible des valeurs disponibles, donc je viens de l'envoyer à la demande de page.
"Les solutions devraient être aussi simples que possible, mais pas plus simples" - A. Einstein
Merci pour l'effort que vous avez mis dans votre réponse. J'ai essayé votre code et cela a fonctionné, mais je n'ai pas le temps en ce moment pour savoir exactement comment cela fonctionne ... va y revenir later..but J'utilise la structure du tableau ... et je pense maintenant comprendre comment créer ces tableaux. Merci encore –
La structure de données est en fait un objet Javascript. Vous trouverez ici un tutoriel JSON décent: http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29 – BalusC
aide .grep $ et .map $ pour c'est juste la course des maîtres. Solution fantastique, je l'ai juste utilisé comme base pour quelque chose de similaire et me sens comme un meilleur programmeur pour cela. solution Impressionnant. – hendrixski