如何使用Selenium和Python从optgroup中选择选项？

Got it, let's work through this. It looks like your select element is using Select2 (given the select2-hidden-accessible class), and you want to show a link dropdown whenever someone picks an option from the "Business Type" optgroup. Here's a practical, user-friendly implementation:

Step 1: Add the Link Dropdown HTML #

First, create the hidden dropdown that will appear. Place this somewhere in your page:

<!-- Hidden link dropdown container -->
<div id="businessLinksDropdown" class="link-dropdown">
  <a href="/buyer-resources">Buyer Resources</a>
  <a href="/farmer-resources">Farmer & Rancher Resources</a>
</div>

Step 2: Style the Dropdown (CSS) #

Add some basic styling to make the dropdown look polished and fit your site's design:

.link-dropdown {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 0;
  z-index: 1000; /* Ensure it sits above other content */
}

.link-dropdown a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
}

.link-dropdown a:hover {
  background-color: #f5f5f5;
}

Step 3: Add JavaScript Logic #

Since you're using Select2, we'll leverage its event system to detect selections and show/hide the dropdown. This code handles both single and multiple selections (since your select has the multiple attribute):

$(document).ready(function() {
  // Initialize Select2 if it's not already set up
  $('#q').select2({
    placeholder: "Choose an option",
    allowClear: true
  });

  // Handle select/unselect events to update dropdown visibility
  $('#q').on('select2:select select2:unselect', function() {
    // Check if any selected option belongs to the "Business Type" optgroup
    const hasBusinessTypeSelection = $('#q option:selected').filter(function() {
      return $(this).closest('optgroup').attr('label') === "Business Type";
    }).length > 0;

    if (hasBusinessTypeSelection) {
      // Position the dropdown directly below the Select2 element
      const selectPosition = $('#q').position();
      $('#businessLinksDropdown')
        .css({
          top: selectPosition.top + $('#q').outerHeight(),
          left: selectPosition.left
        })
        .show();
    } else {
      // Hide the dropdown if no Business Type options are selected
      $('#businessLinksDropdown').hide();
    }
  });

  // Close the dropdown when clicking outside of it or the Select2 element
  $(document).on('click', function(e) {
    if (!$(e.target).closest('#q, #businessLinksDropdown').length) {
      $('#businessLinksDropdown').hide();
    }
  });
});

How This Works: #

• Select2 Initialization: Ensures your select has all the Select2 features (like search, styling).
• Event Listening: We listen for both select2:select and select2:unselect events to handle cases where users add or remove selections.
• Optgroup Check: We filter selected options to see if any are part of the "Business Type" optgroup.
• Dropdown Positioning: The dropdown is placed right below the Select2 element for intuitive user experience.
• Click Outside to Close: Prevents the dropdown from staying open indefinitely when users interact elsewhere on the page.

You can adjust the links, styling, and positioning to match your site's needs. If you're not using jQuery, you can adapt this to vanilla JavaScript, but jQuery is the most common pairing with Select2.

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