如何将Select选项的值传递至Bootstrap模态框的输入框中

Hey there! Let’s get this sorted for you. You want to pull the selected value from your PHP-generated dropdown (selected_category) and populate it into the text input inside your Bootstrap modal (myModal)? No problem—here’s a straightforward, reliable way to do it using JavaScript (since this is front-end interaction):

First, add an id to your modal’s text input—this makes it way easier to target with JavaScript. Also, if you don’t want users editing the selected category, add the readonly attribute:

<input type="text" name="category" id="modal_category_input" class="form-control" readonly>

We’ll use Bootstrap’s built-in modal event show.bs.modal—this triggers right before the modal opens, perfect for populating data before the user sees it. Place this script at the bottom of your page (or inside a DOMContentLoaded listener) to make sure all elements are loaded first:

Vanilla JavaScript Version (No jQuery) #

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Listen for the modal's "about to show" event
  const modal = document.getElementById('myModal');
  modal.addEventListener('show.bs.modal', function() {
    // Get the selected value from the dropdown
    const dropdown = document.getElementById('selected_category');
    const selectedValue = dropdown.value;
    
    // Populate the modal input
    const modalInput = document.getElementById('modal_category_input');
    modalInput.value = selectedValue;
  });
});

jQuery Version (If Your Project Uses It) #

If your setup already includes jQuery (common with Bootstrap 3/4), you can simplify the code:

$(document).ready(function() {
  $('#myModal').on('show.bs.modal', function() {
    const selectedCategory = $('#selected_category').val();
    $('#modal_category_input').val(selectedCategory);
  });
});

Here’s how everything fits together with your existing PHP and modal code, plus security best practices:

<!-- PHP-Generated Dropdown -->
<select id="selected_category" name="selected_category" class="form-control">
  <?php while($row = mysqli_fetch_assoc($get_categories)) { ?>
    <!-- Use htmlspecialchars to escape output (prevents XSS attacks) -->
    <option value="<?php echo htmlspecialchars($row['category_name']); ?>">
      <?php echo htmlspecialchars($row['category_name']); ?>
    </option>
  <?php } ?>
</select>

<!-- Bootstrap Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Item</h4>
      </div>
      <div class="modal-body">
        <form action="" method="post">
          <div class="form-group">
            <label>Selected Category:</label>
            <input type="text" name="category" id="modal_category_input" class="form-control" readonly>
          </div>
          <!-- Add other form fields here -->
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Include Required Scripts (if not already on your page) -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<!-- Our Custom Script -->
<script>
  $(document).ready(function() {
    $('#myModal').on('show.bs.modal', function() {
      const selectedCategory = $('#selected_category').val();
      $('#modal_category_input').val(selectedCategory);
    });
  });
</script>

Quick Notes #

• Why show.bs.modal? This event fires before the modal is visible, so the data is already there when the user opens it—way better than waiting until it’s fully open.
• Escaping Output: Using htmlspecialchars() on your PHP output is a critical security habit to prevent cross-site scripting (XSS) attacks.
• Readonly Attribute: Only add this if you don’t want users changing the category in the modal—remove it if you need them to edit it.

内容的提问来源于stack exchange，提问作者John Jerick Sorio