完成两个选择后，使用Firebase自动填充下拉选择

Question

我希望用户能够从下拉选项中选择年份和年份。 然后，我想使用这两个选择引用数据库并从Firebase自动填充模型下拉列表。 请参阅此处设置的数据库。

本质上，如果用户选择2016和Acura，我希望模型选择添加以下选项：

• ILX
• MDX
• NSX
• RDX
• RLX
• TLX

 // Initialize Firebase var config = { apiKey: "[]", authDomain: "[]", databaseURL: "[]", projectId: "[]", storageBucket: "[]", messagingSenderId: "[]" }; firebase.initializeApp(config); // Assign the reference to the database to a variable named 'database' var database = firebase.database(); selectedMake = false; selectedYear = false; var fitmentYear = ""; var fitmentMake = ""; $(document).ready(function() { // Whenever a user clicks the year input $("#year").on("change", function() { var fitmentYear = $("#year").find(":selected").text(); selectedYear = true; console.log(fitmentYear); }); // Whenever a user clicks the make input $("#make").on("change", function() { var fitmentYear = $("#year").find(":selected").text(); var fitmentMake = $("#make").find(":selected").text(); selectedMake = true; console.log(fitmentMake); console.log("Year Selected is " + selectedYear); console.log("Make Selected is " + selectedMake); if (selectedMake === true && selectedYear === true) { console.log('Year = ' + fitmentYear + ' and Make = ' + fitmentMake); var yearMakeModelTrim = firebase.database().ref("/modelsAndTrims") yearMakeModelTrim.on('value', function(snapshot) { snapshot.forEach(function(childSnapshot) { console.log("childSnapshot is below" + childSnapshot); console.log(childSnapshot); var childData = childSnapshot.val(); console.log("childData is below"); console.log(childData); }); }); } }); if (fitmentYear === true && fitmentModel === true && fitmentMake === true) { //pull trim from firebase } if (fitmentYear === true && fitmentModel === true && fitmentMake === true && fitmentTrim === true) { //pull results from firebase } }); 

 <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Fitment Guide</title> <!-- Our CSS style sheet --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Script --> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="wrapper"> <div id="triviaPannels"> <div class="row"> <div class="col-lg-2"> </div> <div class="col-lg-4"> <h1>Fitment Guide</h1> <select id="year" class="form-control"> <option value="" disabled selected>Year</option> <option value="2017">2017</option> <option value="2016">2016</option> <option value="2015">2015</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> </select> <select id="make" class="form-control"> <option value="" disabled selected>Make</option> <option value="ACURA">ACURA</option> <option value="ALFA_ROMEO">ALFA ROMEO</option> <option value="AM_GENERAL">AM GENERAL</option> </select> <select id="model" class="form-control"> <option value="" disabled selected>Model</option> </select> <select id="trim" class="form-control"> <option value="" disabled selected>Trim</option> </select> <br /><br /> <div class="panel panel-default"> <div class="panel-heading">Results</div> <div class="panel-body">Panel Content</div> </div> </div> </div> </div> </div> </body> </html>