Select onchange event handler
User
we have select element under div class "addon_fn_booking_type" need to apply on change event on it
Assistant
You can use jQuery to apply an `onchange` event to the “ element inside the `.addon_fn_booking_type` div. Here's how you can do it:
### jQuery Approach:
jQuery(document).ready(function ($) {
$('.addon_fn_booking_type select').on('change', function () {
var selectedValue = $(this).val();
console.log("Selected value:", selectedValue);
// Perform any additional action here
});
});### Vanilla JavaScript Approach:
document.addEventListener("DOMContentLoaded", function () {
document.querySelector(".addon_fn_booking_type select")?.addEventListener("change", function () {
console.log("Selected value:", this.value);
// Perform any additional action here
});
});Both approaches will listen for changes in the “ element inside the `.addon_fn_booking_type` div and execute the function when the user selects a new option.
Let me know if you need further modifications! 🚀
User
on the basis of each change set other select dropdown empty
Assistant
You can modify the event listener to clear the value of other “ elements when a change occurs. Here's how you can do it:
### **jQuery Approach**
jQuery(document).ready(function ($) {
$('.addon_fn_booking_type select').on('change', function () {
var selectedValue = $(this).val();
console.log("Selected value:", selectedValue);
// Empty all other select elements except the one that changed
$('.addon_fn_booking_type select').not(this).val('');
});
});### **Vanilla JavaScript Approach**
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".addon_fn_booking_type select").forEach(function (select) {
select.addEventListener("change", function () {
console.log("Selected value:", this.value);
// Clear all other selects inside .addon_fn_booking_type
document.querySelectorAll(".addon_fn_booking_type select").forEach(function (otherSelect) {
if (otherSelect !== select) {
otherSelect.value = '';
}
});
});
});
});### **Explanation:**
– When a “ inside `.addon_fn_booking_type` changes, it logs the selected value.
– It then clears all other “ elements inside `.addon_fn_booking_type`, leaving only the changed one intact.
This ensures that only one dropdown remains selected at a time. 🚀 Let me know if you need further tweaks!