Question

我希望用户能够从下拉选项中选择一年并制作。然后我想使用这两个选项引用数据库并从Firebase自动填充模型下拉列表。 See the database set up here.

基本上，如果用户选择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>

在进行两次选择后使用Firebase自动填充下拉列表选择

0 个答案: