Use drop-down menus to change what appears in the table

Question

I'm trying to create a simple repair form using HTML, using a dropdown I want to be able to select a model and then display all compatible parts in two tables, one for new parts and one for scrap. Currently I'm hardcoding the data into JavaScript while working on my demo. The problem I'm having is that the parts list doesn't show anything except a title. What did I miss? RepairFo

P粉476883986 · Answer

You passed brand-1 as a value in the model dropdown list to item[0], change it to item[2] which it represents Model. I suggest you add a blank option at the top like "Select Model" so that no option is selected by default when the page loads. Do not use

outside of a paragraph. Please stop using var and use const or let. If the data will be changed, use let, for fixed data, use const.

// SKU data
let skuData = [
  ["SKU1", "Description 1", "Value 1"],
  ["SKU2", "Description 2", "Value 2"],
  ["SKU3", "Description 3", "Value 3"]
];

// Model data
let modelData = [
  ["Brand 1", "Gen 1", "Model 1"],
  ["Brand 2", "Gen 2", "Model 2"],
  ["Brand 3", "Gen 3", "Model 3"]
];

// New parts data
let newPartsData = [
  ["Part 1", "10", "5", "Model 1,Model 2"],
  ["Part 2", "20", "3", "Model 1,Model 3"],
  ["Part 3", "30", "2", "Model 2,Model 3"]
];

// Salvaged parts data
let salvagePartsData = [
  ["Part 4", "15", "4", "Model 1,Model 3"],
  ["Part 5", "25", "6", "Model 2,Model 3"],
  ["Part 6", "35", "2", "Model 1,Model 2"]
];

function populateDropdowns() {
  var skuDropdown = document.getElementById('sku');
  var modelDropdown = document.getElementById('model');

  // Populate SKU dropdown
  skuData.forEach(function(item) {
    var option = document.createElement('option');
    option.value = item[0];
    option.text = item[1] + " - " + item[2];
    skuDropdown.appendChild(option);
  });

  // Populate Model dropdown
  modelData.forEach(function(item) {
    var option = document.createElement('option');
    option.value = item[2];
    option.text = item[0] + " - " + item[1] + " - " + item[2];
    modelDropdown.appendChild(option);
  });

  // Initial population of tables
  populateTables();
}

function populateTables() {
  var modelSelection = document.getElementById('model').value;

  // Populate New Parts table
  var newPartsTable = document.getElementById('new-parts-table');
  newPartsTable.innerHTML = "PartQuantitySelect";

  newPartsData.forEach(function(item) {
    if (item[3].includes(modelSelection)) {
      var row = document.createElement('tr');
      var partCell = document.createElement('td');
      partCell.textContent = item[0];
      row.appendChild(partCell);
      var quantityCell = document.createElement('td');
      quantityCell.textContent = item[2];
      row.appendChild(quantityCell);
      var selectCell = document.createElement('td');
      var checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'new_parts[]';
      checkbox.value = item[0];
      selectCell.appendChild(checkbox);
      row.appendChild(selectCell);
      newPartsTable.appendChild(row);
    }
  });

  // Populate Salvaged Parts table
  var salvagePartsTable = document.getElementById('salvaged-parts-table');
  salvagePartsTable.innerHTML = "PartQuantitySelect";

  salvagePartsData.forEach(function(item) {
    if (item[3].includes(modelSelection)) {
      var row = document.createElement('tr');
      var partCell = document.createElement('td');
      partCell.textContent = item[0];
      row.appendChild(partCell);
      var quantityCell = document.createElement('td');
      quantityCell.textContent = item[2];
      row.appendChild(quantityCell);
      var selectCell = document.createElement('td');
      var checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'salvaged_parts[]';
      checkbox.value = item[0];
      selectCell.appendChild(checkbox);
      row.appendChild(selectCell);
      salvagePartsTable.appendChild(row);
    }
  });
}

function checkValue() {
  var skuValue = parseInt(document.getElementById('sku').value);
  var newParts = document.getElementsByName('new_parts[]');
  var salvagedParts = document.getElementsByName('salvaged_parts[]');
  var totalValue = 0;

  for (var i = 0; i < newParts.length; i++) {
    if (newParts[i].checked) {
      var partName = newParts[i].value;
      var partIndex = newPartsData.findIndex(function(item) {
        return item[0] === partName;
      });
      totalValue += parseInt(newPartsData[partIndex][1]);
    }
  }

  for (var i = 0; i < salvagedParts.length; i++) {
    if (salvagedParts[i].checked) {
      var partName = salvagedParts[i].value;
      var partIndex = salvagePartsData.findIndex(function(item) {
        return item[0] === partName;
      });
      totalValue += parseInt(salvagePartsData[partIndex][1]);
    }
  }

  var submitButton = document.getElementById('submit-button');
  if (totalValue < skuValue) {
    submitButton.classList.remove('red-button');
    submitButton.classList.add('green-button');
    submitButton.textContent = 'Pass';
  } else {
    submitButton.classList.remove('green-button');
    submitButton.classList.add('red-button');
    submitButton.textContent = 'Nix';
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px;
}

.table {
  border-collapse: collapse;
}

.table th,
.table td {
  border: 1px solid black;
  padding: 5px;
}

.green-button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.red-button {
  background-color: red;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


  Repair Form
  
    Technician:
    

    SKU:
    

    Serial:
    

    Model:
    

    New Parts
    

    Salvaged Parts