如何将未选中下拉选项填充到表格下拉框并控制台输出数组值

Hey there! Let's tackle your two frontend issues one by one, with fixes and explanations tailored to your code:

1. Show only unselected options from dropdown1 in table's dropdown2 #

Your existing code had a small typo and missed handling dynamically added rows properly. Here's the fixed logic:

Key Fixes & Improvements: #

• Corrected the form → from typo that broke the option-hiding logic
• When adding a new row, we dynamically build dropdown2's options to exclude dropdown1's currently selected value
• Updated the dropdown1 change handler to refresh all existing dropdown2s in the table

$(document).ready(function() {
  let i = 0;

  // Helper function to generate valid options for dropdown2
  function getDropdown2Options(excludeValue) {
    const options = ["Not Started", "In progress", "Finished"];
    return options
      .filter(opt => opt !== excludeValue)
      .map(opt => `<option>${opt}</option>`)
      .join('');
  }

  $(".add-row").click(function() {
    const selectedDropdown1Val = $('#dropdown1').find(":selected").text();
    const dropdown2Options = getDropdown2Options(selectedDropdown1Val);
    
    const row = `
      <tr id="tasklist-${i}">
        <td><input type="text" class="sno"></td>
        <td><input type="text" class="pname"></td>
        <td><input type="text" class="task"></td>
        <td><input type="text" class="date"></td>
        <td><select class="status dropdown2" name="dropdown2">${dropdown2Options}</select></td>
        <td><input type="text" class="comment"></td>
      </tr>
    `;
    $("table > tbody").append(row);
    $('.date').datepicker();

    // Add status color logic to the new dropdown2
    $(`#tasklist-${i} .dropdown2`).change(function() {
      const status = $(this).find('option:selected').text();
      switch(status) {
        case "In progress":
          $(this).css("background-color", "#a1a1ff");
          break;
        case "Finished":
          $(this).css("background-color", "#54c654");
          break;
        default:
          $(this).css("background-color", "#F8F8F8");
      }
    });
    i++;
  });

  // Update all dropdown2s whenever dropdown1 changes
  $('select[name=dropdown1]').on('change', function() {
    const selectedVal = $(this).find(":selected").text();
    $(".dropdown2").each(function() {
      $(this).html(getDropdown2Options(selectedVal));
    });
  });
});

2. Output table input/select values as an array to console #

Your loadValues function is on the right track, but we can make it more robust (skip empty rows if needed, handle edge cases like undefined values):

function loadValues() {
  const mainArr = [];
  $('#tablemain tbody tr').each(function() {
    const tmpArr = [];
    let hasValue = false;
    // Collect values from each cell's input/select
    $(this).find('td').each(function() {
      const value = $(this).find('input, select').val() || '';
      tmpArr.push(value);
      if (value.trim() !== '') hasValue = true;
    });
    // Only add rows with at least one non-empty value (remove this check if you want empty rows)
    if (hasValue) {
      mainArr.push(tmpArr);
    }
  });
  console.log('Table data array:', mainArr);
}

// Attach the function to your button
$('.load').click(function() {
  loadValues();
});

Key Improvements: #

• Skips empty rows (you can remove the hasValue check if you want to include them)
• Handles undefined values gracefully by defaulting to an empty string
• Uses specific selectors to target only the table's tbody rows

Full Working Code #

Here's the complete HTML and JS together, including the jQuery UI dependency for datepicker:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div>
  First Dropdown:
  <select class="status" id="dropdown1" name="dropdown1">
    <option>Not Started</option>
    <option>In progress</option>
    <option>Finished</option>
  </select>
</div>
<div>
  <form>
    <input type="button" class="add-row" value="Add Row">
    <input type="button" class="load" value="Enter">
  </form>
  <table id='tablemain' class="table">
    <thead>
      <tr>
        <th>SNo</th>
        <th>Name</th>
        <th>Assigned Task</th>
        <th>Due Date</th>
        <th>Status</th>
        <th>Comments</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<script>
$(document).ready(function() {
  let i = 0;

  function getDropdown2Options(excludeValue) {
    const options = ["Not Started", "In progress", "Finished"];
    return options
      .filter(opt => opt !== excludeValue)
      .map(opt => `<option>${opt}</option>`)
      .join('');
  }

  $(".add-row").click(function() {
    const selectedDropdown1Val = $('#dropdown1').find(":selected").text();
    const dropdown2Options = getDropdown2Options(selectedDropdown1Val);
    
    const row = `
      <tr id="tasklist-${i}">
        <td><input type="text" class="sno"></td>
        <td><input type="text" class="pname"></td>
        <td><input type="text" class="task"></td>
        <td><input type="text" class="date"></td>
        <td><select class="status dropdown2" name="dropdown2">${dropdown2Options}</select></td>
        <td><input type="text" class="comment"></td>
      </tr>
    `;
    $("table > tbody").append(row);
    $('.date').datepicker();

    $(`#tasklist-${i} .dropdown2`).change(function() {
      const status = $(this).find('option:selected').text();
      switch(status) {
        case "In progress":
          $(this).css("background-color", "#a1a1ff");
          break;
        case "Finished":
          $(this).css("background-color", "#54c654");
          break;
        default:
          $(this).css("background-color", "#F8F8F8");
      }
    });
    i++;
  });

  $('select[name=dropdown1]').on('change', function() {
    const selectedVal = $(this).find(":selected").text();
    $(".dropdown2").each(function() {
      $(this).html(getDropdown2Options(selectedVal));
    });
  });

  $('.load').click(function() {
    loadValues();
  });
});

function loadValues() {
  const mainArr = [];
  $('#tablemain tbody tr').each(function() {
    const tmpArr = [];
    let hasValue = false;
    $(this).find('td').each(function() {
      const value = $(this).find('input, select').val() || '';
      tmpArr.push(value);
      if (value.trim() !== '') hasValue = true;
    });
    if (hasValue) {
      mainArr.push(tmpArr);
    }
  });
  console.log('Table data array:', mainArr);
}
</script>

内容的提问来源于stack exchange，提问作者Joe