jQuery 获取所有选择选项

在 web 开发中，经常需要获取一个下拉列表或复选框中所有被选择的选项，以进行后续处理。使用 jQuery，可以轻松地获取这些选择选项。

获取选择选项的值

使用 .val() 方法可以获取一个下拉列表或单选框中选择的值，例如：

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

对于复选框，由于可以选择多个选项，.val() 方法返回一个包含所有被选择选项值的数组，例如：

var selectedValues = $('input[name=myCheckbox]:checked').val();

获取选择选项的文本内容

使用 .text() 方法可以获取一个下拉列表或单选框中选择的文本内容，例如：

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

对于复选框，由于可以选择多个选项，需要借助 .each() 方法来遍历所有被选择的选项，例如：

var selectedTexts = [];
$('input[name=myCheckbox]:checked').each(function(){
    selectedTexts.push($(this).parent().text());
});

获取选择选项的数据属性

在 HTML 中，可以为选项元素设置自定义的数据属性，例如 data-id="123"。使用 .data() 方法可以获取这些数据属性，例如：

var selectedId = $('#mySelect option:selected').data('id');

类似地，对于复选框，可以遍历所有被选择的选项，并获取它们的数据属性，例如：

var selectedIds = [];
$('input[name=myCheckbox]:checked').each(function(){
    selectedIds.push($(this).data('id'));
});

获取所有选项

如果需要获取一个下拉列表或复选框中所有选项，可以使用 .each() 方法遍历每个选项，例如：

var allOptions = [];
$('#mySelect option').each(function(){
    allOptions.push($(this).val());
});

对于复选框，同样可以使用 .each() 方法遍历每个选项，并获取它们的值、文本内容或数据属性，例如：

var allCheckboxes = [];
$('input[name=myCheckbox]').each(function(){
    allCheckboxes.push({
        value: $(this).val(),
        text: $(this).parent().text(),
        id: $(this).data('id')
    });
});

以上就是使用 jQuery 获取一个下拉列表或复选框中所有选择选项的方法。不同的获取方式可以根据具体情况来选择，灵活使用 jQuery 可以帮助我们更方便地操作 DOM 对象。