无法与 Chrome 中的下拉列表交互

问：

这里是 python 的初学者。我想从下拉列表中选择一个选项。我一直得到“元素不可交互”。我不相信下拉列表上有任何类型的标签覆盖，我可以手动单击下拉列表而不会出现问题。我已经尝试了许多方法，如所示，并在下面出现了相关错误。

这是我的代码：

import selenium
from selenium import webdriver
from selenium.webdriver.chrome.service import Service

from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
#from selenium.webdriver.common.action_chains import action_chains
#from selenium.webdriver.common.actions import Actions
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.select import Select
#from selenium.webdriver.remote import Remote
from selenium.webdriver.chrome.options import Options as ChromeOptions



service = Service()

chrome_options = Options()
chrome_options.add_experimental_option("detach", True)

driver = webdriver.Chrome(service=service, options=chrome_options)
driver.get("https://gtc.clubautomation.com/")

#
#
# removed code to login and move to reservations page
#
#


reserve_court_link = driver.find_element(by=By.ID, value="menu_reserve_a_court")
reserve_court_link.click()

driver.maximize_window()
driver.refresh()
driver.execute_script("window.scrollTo(0,600)")


#Choose service (unecessary manually, but hopefully driving further options?? Only one option to pick)
service_dropdown = Select(driver.find_element(by=By.XPATH, value="//select[@id='component'][@name='component']"))
service_dropdown.select_by_value("2")

#Choose pickleball option
pickleball_dropdown = Select(driver.find_element(by=By.XPATH, value="//select[@id='location'][@name='location']"))
dropdown_element = driver.find_element(by=By.XPATH, value="//select[@id='location'][@name='location']")

#Verify dropdown exists
if pickleball_dropdown is not None: 
    print("drop down exists")
else:
    print("dropdown does NOT exist")

#Verify I have the right dropdown
test_option = pickleball_dropdown.first_selected_option
print(test_option.get_attribute("innerHTML"))

#print values of dropdown
for opt in pickleball_dropdown.options:
    print("option: " + opt.get_attribute("innerHTML") + " : " + opt.get_attribute("value"))


#select by visible text doesn't seem to do anything.
pickleball_dropdown.select_by_visible_text("All Service Locations")


# expand housing type dropdown using javascript -- doesn't seem to actually expand dropdown
dropdown_trigger = driver.find_element(by=By.XPATH, value="//select[@id='location'][@name='location']")
driver.execute_script("arguments[0].click();", dropdown_trigger)

#Wait for object to be clickable -- times out.
#WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//select[@id='location'][@name='location']"))).click()

#error: ElementNotInteractableException: Message: element not interactable
dropdown_element.click()

#AttributeError: 'Select' object has no attribute 'click'
#pickleball_dropdown.click()

#ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated
pickleball_dropdown.select_by_value("35")

我包含了要与之交互的页面的屏幕截图和 HTML

<div class="reserve-court-new-header">Make a New Reservation</div>
<div class="reserve-court-new">
<div class="ca-element-error-wrapper">
     <input type="hidden" name="user_id" value="37688" id="user_id">
</div>    
<div class="ca-element-error-wrapper">
     <input type="hidden" name="event_member_token_reserve_court" value="b3f10b9d113922226d18db05b8c3a448" id="event_member_token_reserve_court">
</div>    
<div class="ca-element-error-wrapper">
     <input type="hidden" name="current_guest_count" value="0" id="current_guest_count">
</div>    
<div class="r-line">
     <div class="t-block">What Service?</div>
     <div class="i-block"><div class="ca-element-error-wrapper">
          <span class="ca-pro-ui"><span class="select-input-container">
               <select name="component" id="component" class="ca-select">
                   <option value="2" selected="selected">Tennis</option>
             </select>
             <script type="text/javascript">
                    (function($) {
                        $(document).ready(function() {
                            $("#component").caSelect({"width":150,"tickWidth":30,"selectType":"select"});
                        });
                    })(jQuery)
              </script>
       </span>
   </span>
 </div>
 </div>
 <div class="clear-both"></div>
 </div>
 <div class="r-line" >
      <div class="t-block">Where?</div>
      <div class="i-block"  style="display: none;">
           <div class="ca-element-error-wrapper">
                <span class="ca-pro-ui"><span class="select-input-container">
                     <select name="club" id="club" class="ca-select">
                         <option value="-1" selected="selected">All Locations</option>
                         <option value="1">Lifetime Tennis GTC</option>
                    </select>
                <script type="text/javascript">
                    (function($) {
                        $(document).ready(function() {
                            $("#club").caSelect({"width":150,"tickWidth":30,"selectType":"select"});
                        });
                    })(jQuery)
                </script>
            </span>
       </span>
  </div>
</div>
<div class="i-block"><div class="ca-element-error-wrapper">
     <span class="ca-pro-ui"><span class="select-input-container">
          <select name="location" id="location" class="ca-select">
              <option value="-1">All Service Locations</option>
              <option value="1">Tennis</option>
              <option value="35">Pickleball / Mini Tennis</option>
          </select>