点击链接切换POST请求+自定义下拉选中值同步至Form Group

Got it, let's tackle your two requirements one by one with practical, working code examples:

HTML links default to GET requests, but we can switch them to POST by dynamically creating and submitting a form when the link is clicked. Here's how:

1. Add a class (like post-link) to the links you want to trigger POST requests
2. Use JavaScript to intercept the click event, prevent the default GET behavior, and submit a hidden POST form instead

Modified HTML for links #

<div class="dropdown-content">
  <a href="/your-target-url" class="post-link">Link 1</a>
  <a href="/another-target-url" class="post-link">Link 2</a>
  <a href="/third-target-url" class="post-link">Link 3</a>
</div>

JavaScript code #

// Bind event to all POST links
document.querySelectorAll('.post-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // Stop the default GET redirect
    
    // Create a hidden form element
    const postForm = document.createElement('form');
    postForm.method = 'POST';
    postForm.action = this.href; // Use the link's target as the form action
    
    // Optional: Add hidden parameters if you need to send extra data
    // const hiddenParam = document.createElement('input');
    // hiddenParam.type = 'hidden';
    // hiddenParam.name = 'extra_param';
    // hiddenParam.value = 'your_value';
    // postForm.appendChild(hiddenParam);
    
    // Append form to page and submit it
    document.body.appendChild(postForm);
    postForm.submit();
  });
});

To make your custom dropdown behave like a native <select> (i.e., pass its selected value with the form), we'll use a hidden input to store the selected value, and update it when an option is clicked.

Modified HTML (with Form Group integration) #

<div class="panel panel-default">
  <div class="panel-heading">Chose option</div>
  <div class="panel-body">
    <!-- Your Form Group with hidden input to store selected value -->
    <div class="form-group">
      <input type="hidden" name="selected_dropdown_value" id="selectedValueInput">
    </div>

    <div class="dropdown" style="margin-bottom: 30px;">
      <button class="dropbtn" id="dropdownTrigger">Día</button>
      <div class="dropdown-content">
        <!-- Add data-value to each option to store its value -->
        <a href="#" data-value="link1_value">Link 1</a>
        <a href="#" data-value="link2_value">Link 2</a>
        <a href="#" data-value="link3_value">Link 3</a>
      </div>
    </div>
  </div>
</div>

JavaScript code to sync selected value #

// Get elements we need
const dropdownTrigger = document.getElementById('dropdownTrigger');
const dropdownOptions = document.querySelectorAll('.dropdown-content a');
const selectedValueInput = document.getElementById('selectedValueInput');

// Bind click event to each dropdown option
dropdownOptions.forEach(option => {
  option.addEventListener('click', function(e) {
    e.preventDefault(); // Stop default link behavior
    
    // Update the button text to show selected option
    dropdownTrigger.textContent = this.textContent;
    // Set the hidden input's value to the selected option's data-value
    selectedValueInput.value = this.dataset.value;
    
    // Optional: Trigger a change event if you need form validation to run
    // selectedValueInput.dispatchEvent(new Event('change'));
  });
});

Now when you select an option from your custom dropdown, the hidden input will hold the selected value, and it will be submitted with your form just like a native <select> element would.

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