如何用jQuery从HTML列表填充模态框表单的<select>选项？

Hey there! Let's tackle this problem step by step. You already have the code working to fill an input from a data-prog attribute, so we'll build on that to get dates from your #course1 list into the modal's select dropdown.

First, let's recap the key elements we're working with #

Assuming your HTML looks something like this (adjust IDs/names if yours differ):

<!-- Your date list -->
<ul id="course1">
  <li>2024-05-10</li>
  <li>2024-05-17</li>
  <li>2024-05-24</li>
</ul>

<!-- Button to open modal -->
<a class="programma-kiezer" data-prog="Forming Fase" href="#" data-toggle="modal" data-target="#onderwijs">Open Course Modal</a>

<!-- Modal with form -->
<div class="modal fade" id="onderwijs" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form>
          <input type="text" name="programma" placeholder="Program name">
          <!-- The select we need to populate -->
          <select name="course-date" id="course-date-select">
            <!-- Options will be added here dynamically -->
          </select>
        </form>
      </div>
    </div>
  </div>
</div>

Solution 1: Populate on page load (for static date lists) #

If your date list doesn't change after the page loads, we can fill the select as soon as the page is ready. Add this to your existing jQuery code:

jQuery(window).on("load", function () {
  // 1. Populate the date select dropdown
  const $dateSelect = jQuery('#course-date-select');
  
  // Clear any existing options first (prevents duplicates on refresh)
  $dateSelect.empty();
  
  // Add a default placeholder option (optional but user-friendly)
  $dateSelect.append('<option value="">Select a course date</option>');
  
  // Loop through each date in the #course1 list
  jQuery('#course1 li').each(function() {
    const dateText = jQuery(this).text().trim(); // Get clean date text
    // Create and append an option for each date
    $dateSelect.append(`<option value="${dateText}">${dateText}</option>`);
  });

  // 2. Keep your existing code for filling the programma input
  jQuery('.programma-kiezer').on('click', function(e) {
    e.preventDefault();
    jQuery('input[name="programma"]').val(jQuery(this).data('prog'));
  });
});

Solution 2: Populate when modal opens (for dynamic date lists) #

If your dates are loaded dynamically (e.g., via AJAX after the page loads), it's better to populate the select right when the modal is about to show. This ensures you always get the latest dates:

jQuery(window).on("load", function () {
  // 1. Keep your existing programma input code
  jQuery('.programma-kiezer').on('click', function(e) {
    e.preventDefault();
    jQuery('input[name="programma"]').val(jQuery(this).data('prog'));
  });

  // 2. Populate dates when the modal starts to show
  jQuery('#onderwijs').on('show.bs.modal', function() {
    const $dateSelect = jQuery('#course-date-select');
    $dateSelect.empty();
    $dateSelect.append('<option value="">Select a course date</option>');
    
    jQuery('#course1 li').each(function() {
      const dateText = jQuery(this).text().trim();
      $dateSelect.append(`<option value="${dateText}">${dateText}</option>`);
    });
  });
});

Quick Notes #

• Use .text().trim(): This makes sure we get clean date text without extra spaces or HTML tags from the <li> elements.
• Customize option values: If you need to store a unique ID instead of the date text (e.g., for form submission), add a data attribute to your <li> like <li data-date-id="123">2024-05-10</li>, then use jQuery(this).data('date-id') as the option's value.
• Clear existing options: Always call .empty() before adding new options to avoid duplicate entries if the modal is opened multiple times.

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