jQuery操作单选、复选及下拉列表教程

"这篇资料主要介绍了如何使用jQuery来操作HTML中的单选按钮、复选框以及下拉列表，包括添加、删除选项以及获取选中值等常见操作。内容经典实用，适合开发者参考收藏。" 在JavaScript库中，jQuery提供了一套简洁而强大的API，使得对DOM元素的操作变得简单。针对单选按钮、复选框和下拉列表的控制是前端开发中常见的任务，下面将详细介绍如何使用jQuery来完成这些操作。 1. 操作下拉列表（Dropdown） - 添加/移除Option 以下代码展示了如何遍历下拉列表并根据条件添加或移除选项： ```javascript function changeShipMethod(shipping) { var len = $("select[@name=ISHIPTYPE] option").length; if (shipping.value != "CA") { $("select[@name=ISHIPTYPE] option").each(function() { if ($(this).val() == 111) { $(this).remove(); } }); } else { $("<option value='111'>UPSGround</option>").appendTo($("select[@name=ISHIPTYPE]")); } } ``` 这段代码首先检查`ISHIPTYPE`下拉列表中是否有值为111的选项，如果`shipping.value`不等于"CA"，则移除该选项；反之，如果满足条件，则添加新的`UPSGround`选项。 - 获取选中值 获取下拉列表中选中项的值或文本，有以下几种方式： ```javascript // 获取选中项的文本 var selectedText = $("#testSelect option:selected").text(); // 或者 var selectedText = $("#testSelect").find('option:selected').text(); // 获取选中项的值 var selectedValue = $("#testSelect").val(); ``` - 清空下拉框 清空下拉列表可以使用`empty()`方法： ```javascript $("#select").empty(); // 或者 $("#select").html(''); ``` - 添加Option 添加新的选项到下拉列表： ```javascript $("<option value='1'>1111</option>").appendTo("#select"); ``` 2. 操作单选按钮（Radio Buttons）与复选框（Checkboxes） - 获取选中状态 获取单选按钮或复选框是否被选中，可以使用`is()`或`prop()`方法： ```javascript var isChecked = $('#myCheckbox').is(':checked'); // 或者 var isChecked = $('#myCheckbox').prop('checked'); ``` - 设置选中状态 设置单选按钮或复选框的选中状态： ```javascript $('#myCheckbox').prop('checked', true); // 选中 $('#myCheckbox').prop('checked', false); // 取消选中 ``` - 获取/设置值 获取或设置单选按钮或复选框的值： ```javascript var currentValue = $('#myRadioButton').val(); // 获取值 $('#myRadioButton').val('newValue'); // 设置值 ``` jQuery提供了丰富的DOM操作方法，使得对HTML元素的处理更加方便快捷。通过上述示例，我们可以高效地实现对单选按钮、复选框和下拉列表的控制，提升前端开发效率。在实际项目中，开发者可以根据需求灵活运用这些方法，实现动态交互效果。