点击.device_phone_apple_x元素时设置下拉框选中value=1的实现方法

Hey there! Let's sort out this problem for you. When clicking the element with class .device_phone_apple_x, we need to set two specific dropdowns to their respective value=1 options. Here are two straightforward implementations you can use:

方案1：原生JavaScript（无依赖） #

This works if you don't want to rely on jQuery or other libraries:

// Wait for the entire DOM to load before running the code
document.addEventListener('DOMContentLoaded', function() {
  // Grab the element that triggers the action
  const appleXTrigger = document.querySelector('.device_phone_apple_x');
  
  // Get references to both dropdowns
  const categoryDropdown = document.querySelector('.bookly-select-mobile.bookly-js-select-category');
  const serviceDropdown = document.querySelector('.bookly-select-mobile.bookly-js-select-service');
  
  // Add click event listener to the trigger element
  appleXTrigger.addEventListener('click', function() {
    // Set the first dropdown to select Apple (value=1)
    categoryDropdown.value = '1';
    // Set the second dropdown to its value=1 option
    serviceDropdown.value = '1';
    
    // Optional: Trigger the change event if your page has logic that depends on it
    categoryDropdown.dispatchEvent(new Event('change'));
    serviceDropdown.dispatchEvent(new Event('change'));
  });
});

关键说明： #

• We wrap everything in DOMContentLoaded to make sure all elements are loaded before we try to access them.
• If your .device_phone_apple_x element is added dynamically (after page load), use event delegation instead:

  document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('device_phone_apple_x')) {
        const categoryDropdown = document.querySelector('.bookly-select-mobile.bookly-js-select-category');
        const serviceDropdown = document.querySelector('.bookly-select-mobile.bookly-js-select-service');
        
        categoryDropdown.value = '1';
        serviceDropdown.value = '1';
        
        categoryDropdown.dispatchEvent(new Event('change'));
        serviceDropdown.dispatchEvent(new Event('change'));
      }
    });
  });
  

方案2：jQuery（适合已有jQuery的项目） #

If your project already uses jQuery (common with plugins like Bookly), this is a more concise approach:

$(document).ready(function() {
  // Bind click event to the trigger element
  $('.device_phone_apple_x').on('click', function() {
    // Set and trigger change for category dropdown
    $('.bookly-select-mobile.bookly-js-select-category').val('1').trigger('change');
    // Set and trigger change for service dropdown
    $('.bookly-select-mobile.bookly-js-select-service').val('1').trigger('change');
  });
});

关键说明： #

• For dynamically added .device_phone_apple_x elements, use event delegation here too:

  $(document).ready(function() {
    $(document).on('click', '.device_phone_apple_x', function() {
      $('.bookly-select-mobile.bookly-js-select-category').val('1').trigger('change');
      $('.bookly-select-mobile.bookly-js-select-service').val('1').trigger('change');
    });
  });
  

• The .trigger('change') ensures any existing change event listeners on the dropdowns fire, which is important if your page updates other content based on dropdown selections.

内容的提问来源于stack exchange，提问作者Je Boy Abi