jquery获取下拉框的值

使用 jQuery 获取下拉框的值

通过 jQuery 获取下拉框（<select> 元素）的值非常简单，可以使用 .val() 方法。以下是几种常见场景的实现方式：

获取选中的值

var selectedValue = $('#dropdownId').val();

#dropdownId 是下拉框的 ID 选择器，.val() 直接返回当前选中的选项的值。

获取选中的文本

var selectedText = $('#dropdownId option:selected').text();

通过 option:selected 选择器获取当前选中的 <option> 元素，再使用 .text() 获取其显示文本。

监听下拉框变化事件

$('#dropdownId').on('change', function() {
    var selectedValue = $(this).val();
    var selectedText = $(this).find('option:selected').text();
    console.log('值:', selectedValue, '文本:', selectedText);
});

通过 change 事件实时监听下拉框选择的变化，触发时获取最新值和文本。

多选下拉框的值获取

var selectedValues = $('#multiSelectDropdown').val();

对于设置了 multiple 属性的下拉框，.val() 返回一个数组，包含所有选中的值。

注意事项

• 确保下拉框的 value 属性已正确设置，否则 .val() 可能返回空或未定义。
• 如果下拉框未选择任何选项（且无默认选项），.val() 返回 null。
• 对于动态加载的下拉框，需确保 DOM 完全加载后再执行操作，可包裹在 $(document).ready() 中。