在 JavaScript 中，监听下拉框（）值改变的事件主要有两种方式：一种是直接在 HTML 中写 onchange 属性，另一种是使用 JavaScript 的 addEventListener（推荐，尤其是使用 jQuery 或现代框架时）。

以下是几种常见的实现方式：

原生 JavaScript (推荐方式)
使用 addEventListener 监听 change 事件。这是最标准、最灵活的做法。

请选择...
选项 1
选项 2
选项 3

// 获取下拉框元素
const selectElement = document.getElementById('mySelect');

// 添加 change 事件监听器
selectElement.addEventListener('change', function() {
    // this.value 获取当前选中的值
    const selectedValue = this.value;
    // this.options[this.selectedIndex].text 获取当前选中的文本
    const selectedText = this.options[this.selectedIndex].text;

    console.log("选中的值:", selectedValue);
    console.log("选中的文本:", selectedText);

    // 在这里执行你的逻辑
    if (selectedValue === '2') {
        alert("你选择了选项 2！");
    }
});

原生 JavaScript (HTML 内联方式)
直接在 HTML 标签中写 onchange 属性。这种方式简单，但不利于代码维护（HTML 和 JS 耦合）。

苹果
香蕉
橙子

function handleSelectChange(selectObj) {
    const value = selectObj.value;
    console.log("改变了，新值是: " + value);
    
    // 逻辑处理...
}

结合你之前的 jQuery 环境
既然你之前询问了 jQuery，如果你项目中已经引入了 jQuery，可以使用 jQuery 的 .on(‘change’, …) 方法，语法更简洁且兼容性好。

苹果
香蕉

(document).ready(function() {
    // 监听 change 事件
    ('#fruitSelect').on('change', function() {
        // (this).val() 获取值
        var val = (this).val();
        // (this).find('option:selected').text() 获取文本
        var text = (this).find('option:selected').text();

        console.log("jQuery 捕获到变化:", val, text);

        // 示例：根据选择禁用另一个输入框
        if (val === 'banana') {
            ('#otherInput').prop('disabled', true);
        } else {
            ('#otherInput').prop('disabled', false);
        }
    });
});

常见应用场景：联动下拉框
这是最常见的用法：当第一个下拉框改变时，动态更新第二个下拉框的选项。

// 假设这是原生 JS 写法
const provinceSelect = document.getElementById(‘province’);
const citySelect = document.getElementById(‘city’);

provinceSelect.addEventListener(‘change’, function() {
const province = this.value;

// 清空城市选项
citySelect.innerHTML = '请选择城市';

let cities = [];
if (province === 'beijing') {
    cities = ['朝阳区', '海淀区', '丰台区'];
} else if (province === 'shanghai') {
    cities = ['浦东新区', '黄浦区', '静安区'];
}

// 动态添加选项
cities.forEach(city => {
    const option = document.createElement('option');
    option.value = city;
    option.text = city;
    citySelect.appendChild(option);
});

});

总结
获取选中的值：element.value (原生) 或 (this).val() (jQuery)。
获取选中的文本：element.options[element.selectedIndex].text (原生) 或 (this).find(‘option:selected’).text() (jQuery)。
触发时机：只有当用户真正改变了选项并失去焦点（或按下回车）时，change 事件才会触发。如果只是想监听鼠标悬停或点击过程，需要用 click 或 mousedown，但通常处理下拉框逻辑都用 change。