我希望用户能够从下拉选项中选择年份和年份。 然后,我想使用这两个选择引用数据库并从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> 

  ask by NKuch translate from so

本文未有回复,本站智能推荐:

1回复

选择由Firebase动态创建的元素

我创建了一个网站,它显示了Firebase数据库中的照片。 我希望当按下心形按钮时,返回带有所选图像的URL的警报。 我遇到了问题,因为当我点击按钮时,它会返回数据库中的所有网址,而不仅仅是我选择的动物的网址。 的JavaScript / jQuery的: 网站截图:
1回复

(Javascript)Firebase错误,重新连接到互联网后自动多次写入数据库

我正在尝试编写一些代码,使我们可以在互联网可用时以及在用户断开连接并再次重新连接时将数据存储到数据库中。 我试图使用示例代码来帮助我: <!DOCTYPE html> <html> <head> <meta charset="utf-8
1回复

如何获取DOM自动更新-Firebase问题

我的作业包括使用Firebase和使用moment.js更新火车将要到达的时间以及到下一列火车还剩多少分钟。 除了自动更新火车的到达时间和剩余时间,几乎所有的东西都在工作。 我有一个想法,即通过使用Firebase会自动发生这种情况,但是很明显,我缺少了一些东西-如果我刷新页面会刷新正确的时
2回复

使用 Javascript 删除 Firebase

所以我有这个代码: 这将删除 etc. [0] 以及连接到数据库中该索引的所有数据(确切地说是哪个数字并不重要)。 当我删除该索引时,如何更新所有其他索引以从 0 开始。 例子: 我删除: [0] 这保持: 我要这个:
2回复

使用JavaScript过滤Firebase查询

我的Firebase数据库的JSON如下所示: 我正在基于来自firebase的初始查询构建我的html,如下所示: 然后,我想使用基本的html文本输入来使用Firebase的内置查询在提交时重绘dom,因此如下所示: 我无法弄清楚如何使用输入通过“标题”查询我的Fir
1回复

如何通过Require.js使用Firebase数据库和Firebase存储

我想将Firebase-Database和Firebase-Storage与Require.js一起使用。 我的文件结构设置如下: 我的app.js配置文件: 我的main.js文件(用于初始化Firebase): 我的firebase_refs.js文件(用于声明
1回复

使用Firebase创建排行榜

我正在尝试使用Firebase Realtime DB构建前十名的排行榜-我能够按得分顺序排在前十名(由于Firebase的存储方式是升序,所以前十名),但是当我尝试将其放置在页面中时它们都按关键顺序显示。 如果我是一个博彩人,我猜这与for循环有关,我必须创建元素-但我对Javascri
1回复

如何使用jquery和firebase监听删除子项

问题是:当我单击“删除”按钮时,数据已从Firebase中删除,但是我需要刷新页面,但如何在不刷新页面的情况下做到这一点 我尝试了事件监听器child_removed和child_changed,但是没有运气,也许我没有把它放在正确的位置