5級相互依賴的選擇列表

Question

我很高興有這樣的地方，以便人們可以回答他們的問題，即使像我這樣的初學者！我不知道要從這裏出發。

我想創建一個列出汽車製造，汽車模型，年份，驅動程序和規模的相互依存關係。

我已經創建了這些字段，我可以根據所做的選擇填充汽車製造商和汽車模型。我被困在如何填充'年'字段取決於在前面的框中所做的選擇。我知道第一個盒子需要一個功能。這裏是我的代碼」

HTML：

<form name="selectionForm"> 
    <select name="makes" id="makes" size="3" style="width:125px"> 
     <option selected>Select a Make>></option> 
    </select> 
    <select name="models" id="models" size="3" style="width:125px"></select> 
    <select name="years" id="years" size="3" style="width:125px"></select> 
    <select name="drivers" id="drivers" size="3" style="width:125px"></select> 
    <select name="scales" id="scales" size="3" style="width:125px"></select> 
</form> 

的JavaScript：

jQuery(function($) { 
    initModels(); 

    function initModels() { 
     var makesAndModels = { 
      'Ford': ['Fiesta', 'Focus', 'Mondeo'], 
      'Vauxhall': ['Astra', 'Cavalier', 'Vectra'] 
     }; 

     // Populate makes 
     $.each(makesAndModels, function (k, v) { 
      $('#makes').append('<option>' + k + '</option>'); 
     }); 

     // Populate models 
     $('#makes').change(function() { 
      var $models = $('#models'); 

      $models.html(""); 

      var models = makesAndModels[$(this).val()]; 

      $.each(models, function (k, v) { 
       $models.append('<option>' + v + '</option>'); 
      }); 
     }); 
    } 
}); 

我將非常感激出於自己的一些方向，因爲我不知道在哪裏可以從這裏走

Answer 1

$('#years').change(function() { 
    //do something like Populate models.... 
} 

那麼，有什麼區別？

Answer 2

好吧，這是一個很長的回答，並且花了很長時間準備，所以請耐心等待（準備好）。另外，如果你不想閱讀這篇文章，下面有一個jsFiddle。

將每輛汽車存儲爲單獨的物體會更好。如果你有一個數據庫（或將來有計劃），這就是你的數據將被存儲的方式。嵌套數組也會成倍地痛苦，所以最好避開它們。因此，要開始，我們將改變你的數據結構，以這樣的：

var vehicles = [ 
    { make: 'Ford', model: 'Fiesta', year: '2001', driver: 'me', scale: '1:43' }, 
    { make: 'Ford', model: 'Fiesta', year: '2005', driver: 'me', scale: '1:33' }, 
    { make: 'Ford', model: 'Focus', year: '1999', driver: 'you', scale: '1:18' }, 
    { make: 'Ford', model: 'Modeo', year: '1998', driver: 'Nigel Mansell', scale: '1:43' }, 
    { make: 'Vauxhall', model: 'Astra', year: '2002', driver: 'James Thompson', scale: '1:43' }, 
    { make: 'Vauxhall', model: 'Vectra', year: '2000', driver: 'Jason Plato', scale: '1:18' } 
]; 

第一件事，第一，預propuate最初使選擇框：

var makes = get_distinct(vehicles, 'make'); 
$.each(makes, function(index, value) { 
    $('select#make').append('<option value="' + value + '">' + value + '</option>') 
}); 

一旦你的是，你需要設置一種過濾數據的方式。您需要通過選定選項過濾車輛的功能，並獲得不同的值。以下filter_vehicles()是可怕，但我累了，它已經很晚了，所以它必須做。你做這個動態會更好，並且會有一個簡單的解決方案，但是我的大腦現在被炒了。

function filter_vehicles() { 
    return $.grep(vehicles, function(n, i) { 
     if ($('#driver').val() != '') 
      return n.make == $('#make').val() && n.model == $('#model').val() && n.year == $('#year').val() && n.driver == $('#driver').val(); 
     if ($('#year').val() != '') 
      return n.make == $('#make').val() && n.model == $('#model').val() && n.year == $('#year').val(); 
     if ($('#model').val() != '') 
      return n.make == $('#make').val() && n.model == $('#model').val(); 
     else 
      return n.make == $('#make').val(); 
    }); 
} 

// returns distinct properties from an array of objects 
function get_distinct(array, property) { 
    var arr = []; 

    $.each(array, function(index, value) { 
     if ($.inArray(value[property], arr) == -1) { 
      arr.push(value[property]); 
     } 
    }); 

    return arr; 
} 

然後，您需要更新選擇框。您可以通過在每個單獨的選擇框上定位更改事件來手動執行此操作，但您也可以通過將事件附加到所有選擇框來動態執行此操作。我更喜歡這種方法，因爲它添加額外的字段時不會增加開銷。

$('select').change(function() { 
    // don't execute if this is the last select element 
    if ($(this).is(':last')) return; 

    // clear all of the following select boxes, leaving a blank option 
    $(this).nextAll().html('<option></option>'); 

    // get list of vehicles filtered by all the previous parameters 
    var filtered_vehicles = filter_vehicles(); 

    // get the next select element 
    var next = $(this).next(); 

    // get the distinct values from our list of filtered vehicles 
    var values = get_distinct(filtered_vehicles, next.attr('id')); 

    // append our options 
    $.each(values, function(index, value) { 
     next.append('<option value="' + value + '">' + value + '</option>') 
    }); 
}); 

所有的一切，你會得到這樣的jsfiddle：http://jsfiddle.net/8FHZK/

這是SQL所有容易。所以如果你有一個數據庫，你可以在服務器上執行查詢來返回過濾後的集合，這會刪除上面的一些代碼。

我不知道爲什麼我手動編寫了所有這些，因爲可能有一個jQuery插件已經完成了所有（並且更好）。但是，嘿，這樣做了，我很開心，並且所有的代碼都會被評論以協助您的學習:)