如何将MDCSelect及mdc-select__selected-text的值传递至PHP $_POST变量？

Hey there! Let's tackle your two questions about passing values from Material Design Select components to PHP's $_POST variable—here's a straightforward breakdown:

1. Passing MDCSelect Component Values to $_POST #

MDCSelect is built on top of the native HTML <select> element, so you don't need any fancy work if you set things up correctly. The key is ensuring the underlying native select has a name attribute, since forms submit data based on element names.

Example Implementation: #

<form method="post" action="your-handler.php">
  <!-- MDCSelect Container -->
  <div class="mdc-select mdc-select--filled">
    <div class="mdc-select__anchor">
      <span class="mdc-select__ripple"></span>
      <span class="mdc-floating-label">Choose an option</span>
      <span class="mdc-select__selected-text"></span>
      <span class="mdc-select__dropdown-icon">
        <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
          <polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
          <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
        </svg>
      </span>
      <span class="mdc-line-ripple"></span>
    </div>
    <!-- Native Select with Name Attribute -->
    <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
      <ul class="mdc-list" role="listbox">
        <select class="mdc-select__native-control" name="user-choice">
          <option value="" selected></option>
          <option value="option-1">First Option</option>
          <option value="option-2">Second Option</option>
          <option value="option-3">Third Option</option>
        </select>
      </ul>
    </div>
  </div>

  <button type="submit" class="mdc-button">Submit</button>
</form>

<script>
  // Initialize MDCSelect
  const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));
</script>

Accessing in PHP: #

In your-handler.php, you can directly access the selected value via:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $selectedValue = $_POST['user-choice'];
  echo "Selected value: " . $selectedValue;
}
?>

2. Passing mdc-select__selected-text Value to PHP $_POST #

If you need the display text (the content inside mdc-select__selected-text) instead of the option's value, then you'll need a hidden input to store this text—since the native <select> only submits the value attribute by default.

Example with Hidden Input: #

<form method="post" action="your-handler.php">
  <div class="mdc-select mdc-select--filled">
    <!-- ... (same MDCSelect structure as above) ... -->
    <select class="mdc-select__native-control" name="user-choice">
      <option value="" selected></option>
      <option value="option-1">First Option</option>
      <option value="option-2">Second Option</option>
      <option value="option-3">Third Option</option>
    </select>
  </div>

  <!-- Hidden input to store selected text -->
  <input type="hidden" name="selected-text" id="selected-text">

  <button type="submit" class="mdc-button">Submit</button>
</form>

<script>
  const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));
  const hiddenTextInput = document.getElementById('selected-text');

  // Sync selected text to hidden input on change
  select.listen('MDCSelect:change', () => {
    if (select.selectedIndex !== -1) {
      hiddenTextInput.value = select.selectedOptions[0].textContent.trim();
    }
  });

  // Set initial value if there's a pre-selected option
  if (select.selectedIndex !== -1) {
    hiddenTextInput.value = select.selectedOptions[0].textContent.trim();
  }
</script>

Accessing the Text in PHP: #

Now you can grab the display text from $_POST:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $selectedText = $_POST['selected-text'];
  echo "Selected text: " . $selectedText;
}
?>

Key Takeaway #

• For option values: No need for hidden inputs—just ensure the native <select> has a name attribute. The MDCSelect component will keep the native select in sync automatically.
• For display text: Yes, you need a hidden input. Use JavaScript to listen for the MDCSelect:change event and update the hidden input's value with the selected option's text.

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