jquery下拉框选中事件
jQuery 下拉框选中事件
jQuery 中监听下拉框（<select>）选中事件通常使用 change 事件，也可以通过其他方式实现动态操作。以下是几种常见方法：
监听 change 事件
通过 change 事件监听下拉框选项变化，触发回调函数：
$('#mySelect').change(function() {
var selectedValue = $(this).val();
console.log('选中的值:', selectedValue);
});获取选中项的文本
如果需要获取选中项的显示文本（非 value），使用以下代码：
$('#mySelect').change(function() {
var selectedText = $(this).find('option:selected').text();
console.log('选中的文本:', selectedText);
});动态设置选中事件
对于动态生成的 select 元素，需使用事件委托：
$(document).on('change', '#dynamicSelect', function() {
console.log('动态元素选中值:', $(this).val());
});手动触发选中事件
通过代码触发 change 事件：
$('#mySelect').val('value2').trigger('change');多选下拉框处理
对于 multiple 属性的下拉框，需遍历选中项：
$('#multiSelect').change(function() {
var selectedValues = $(this).val(); // 返回数组
console.log('多选值:', selectedValues);
});注意事项
- 确保 DOM 加载完成后再绑定事件，可将代码放在
$(document).ready()中。 - 事件委托适用于动态内容，但需注意性能影响。
- 使用
prop('selectedIndex')可获取选中项的索引。
以上方法覆盖了大多数下拉框操作场景，根据实际需求选择合适的方式。
