如何将模态框中select输入框的值显示到模态框外的span元素？

Hey there, let's get this sorted for you! To show the selected value from your modal's dropdown in a span outside the modal, we just need to target the right elements and add a simple event listener. Here's a step-by-step solution tailored to your existing Pug markup:

First: Add an Identifier to Your Target Span #

First off, make sure the span you want to update has a unique id so we can easily target it. For example:

<span id="selected-month-output">No month selected yet</span>

Step 1: Update Your Modal's Select Element #

Let's add an id to your select inside the modal—this makes it easy to listen for changes. Here's your modified Pug markup:

#date.modal.inmodal.fade(tabindex='-1' role='dialog' aria-hidden='true')
  .modal-dialog.modal-m
    .modal-content
      .modal-header
        button.close(type='button' data-dismiss='modal')
          span(aria-hidden='true') ×
          span.sr-only Close
        h4.modal-title Select reporting month
      .modal-body
        .form-group
          h4
            i.fa.fa-calendar
            | Month
          .selectContainer
            select.form-control(name='month' id='reporting-month-select')
              option(value='1') January
              option(value='2') February
              option(value='3') March
              //- Add all remaining month options here

Step 2: Add the JavaScript to Sync the Value #

Since you're using Bootstrap modals, jQuery is already available (Bootstrap depends on it). Add this script at the bottom of your HTML body, or inside a document.ready block:

$(document).ready(function() {
  // Grab references to our elements
  const monthSelect = $('#reporting-month-select');
  const outputSpan = $('#selected-month-output');

  // Function to update the span with the selected value
  const updateMonthDisplay = () => {
    // Use .text() to get the visible month name, or .val() for the numeric value
    const selectedMonth = monthSelect.find('option:selected').text();
    outputSpan.text(selectedMonth);
  };

  // Listen for changes on the dropdown
  monthSelect.on('change', updateMonthDisplay);

  // Optional: Show the default selected month when the page loads
  updateMonthDisplay();
});

If You Prefer Vanilla JavaScript (No jQuery) #

If you'd rather skip jQuery, here's the equivalent vanilla JS code:

document.addEventListener('DOMContentLoaded', function() {
  const monthSelect = document.getElementById('reporting-month-select');
  const outputSpan = document.getElementById('selected-month-output');

  const updateMonthDisplay = () => {
    const selectedOption = monthSelect.options[monthSelect.selectedIndex];
    outputSpan.textContent = selectedOption.textContent;
  };

  monthSelect.addEventListener('change', updateMonthDisplay);
  updateMonthDisplay(); // Initial load update
});

How This Works #

• We target the dropdown and output span using their unique IDs
• Every time the user selects a new month, the change event triggers our update function
• The function grabs the selected month's name (or value, if you swap .text() for .val()) and updates the span's content
• The initial call to updateMonthDisplay() ensures the default selected month shows up right away when the page loads

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