(besbelli, jQuery'ye referans farklı olabilir) Gerçekten @Marko Dunic tarafından çözüm sevdim ama seçeneklere kimlikleri bağlanması için ihtiyaçlarımı karşılamadı. Kimliklerimi ekledikten sonra, JS kodunu daha da küçük ve basit hale getirebileceğimi fark ettim. Çözümüm, veri ilişkisel bir veritabanından geldiğinde ve JSON giriş verisi Birincil/Yabancı Anahtarlar ile ilişkisel yapıyı koruduğunda tasarlandı. O Make-Modeli 2. ve 3. metin kutuları ve Tip (yerli, ithal, tekne, vb) olan 1.seviye yani benim çözüm işlevini kaydırır
<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>
Uyarı: Burada JSON veridir.İyi biçimlendirmeyi korurken, kazan plakası JS'yi 23 satıra (daha az yorum) aldım.
JSON veri Type-Make-Modeli nadiren değiştirmek çünkü init üzerinde java Listelerinde önbelleğe alınır SQL sorguları görüntülemeye kadar çok kolaydır. Bu mimari zorlaştırmaktadır çünkü herhangi bir dinamik AJAX kullanmayın, ben mevcut değerlerin nispeten küçük bir listesi var, bu yüzden sadece sayfa isteği üzerine gönderin. Eğer cevap koymak çaba için A. Einstein
teşekkürler -
"Çözümler mümkün olduğunca basit, ancak hiçbir basit olmalı". Ben kodunuzu çalıştı ve o amele, ama tam olarak nasıl çalıştığını ... Ben dizi yapısını kullanıyorum later..but geri gelecektir öğrenmek için şu anda vaktim yok ... ve ben şimdi ben düşünüyorum Bu dizileri nasıl oluşturacağınızı anlar. Tekrar teşekkürler –
Veri yapısı aslında bir Javascript nesnesidir. http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29 – BalusC
$ .grep ve bu sadece ustalar vuruştur için $ .map kullanma: Burada iyi bir JSON öğretici bulabilirsiniz. Fantastik çözüm, sadece benzer bir şey için bir temel olarak kullandım ve bunun için daha iyi bir programcı gibi hissediyorum. Müthiş çözüm. – hendrixski