<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> ???</head> ???<body> ???????<center> ???????????<!--文本框--> ???????????用户名:<input type="text" name="username" id="username" value="初始值" /> ???????????<br /> ???????????<br /> ???????????<!--下拉列表--> ???????????部门: ???????????<select name="unit" id="unit" style="width: 200px;"> ???????????????<option value="0" selected>--请选择--</option> ???????????????<option value="1">部门1</option> ???????????????<option value="2">部门2</option> ???????????</select><br /> ???????????<!--多选框--> ???????????爱好: ???????????<input type="checkbox" name="aihao" id="" value="0" checked="checked" />篮球 ???????????<input type="checkbox" name="aihao" id="" value="1" checked="checked" />足球 ???????????<input type="checkbox" name="aihao" id="" value="2" />羽毛球 ???????????<input type="checkbox" name="aihao" id="" value="3" />乒乓球 ???????????<br /> ???????????<!--单选框--> ???????????性别: ???????????<input type="radio" name="gender" id="" value="0" checked="checked" />男 ???????????<input type="radio" name="gender" id="" value="1" />女 ???????????<br /> ???????????<br /> ???????????<input type="button" id="" value="改变文本值" onclick="initText()" /> ???????????<input type="button" id="" value="改变下拉列表值" onclick="changeSelect()" /> ???????????<input type="button" id="" value="改变多选框值" onclick="changeCheckbox()" /> ???????????<input type="button" id="" value="改变单选框值" onclick="changeRadio()" /> ???????????<input type="button" id="" value="动态添加一个给下拉列表" onclick="addSelect()" /> ???????????<script type="text/javascript"> ???????????????/*读取与改变文本框值*/ ???????????????function initText() { ???????????????????alert($("#username").val()); ???????????????????$("#username").val("这是改变后的值"); ???????????????} ???????????????/*读取与改变下拉列表值*/ ???????????????function changeSelect() { ???????????????????alert("选的值是" + $("#unit option:selected").val() + ",文本是:" + $("#unit option:selected").text()); ???????????????????$("#unit").val("2"); ???????????????} ???????????????function changeCheckbox() { ???????????????????/*获取多选框的值*/ ???????????????????// ???????????????????$aihaos是一个数组 ???????????????????var $aihaos = $("[name=‘aihao‘][checked]"); ???????????????????alert("多选框选中个数:" + $aihaos.length); ???????????????????for(var i = 0; i < $aihaos.length; i++) { ???????????????????????var value = $($aihaos[i]).val(); ???????????????????????alert(value); ???????????????????} ???????????????????/*设置为不选中状态*/ ???????????????????$($aihaos).attr("checked", false); ???????????????????//设置其中一个为选中状态 ???????????????????$("[name=‘aihao‘] :eq(2)").attr("checked", ‘checked‘); ???????????????} ???????????????function changeRadio() { ???????????????????/*获取单选框的值*/ ???????????????????// ???????????????????$aihaos是一个数组 ???????????????????var $aihaos = $("[type=‘radio‘][checked]"); ???????????????????alert("多选框选中个数:" + $aihaos.length); ???????????????????for(var i = 0; i < $aihaos.length; i++) { ???????????????????????var value = $($aihaos[i]).val(); ???????????????????????alert(value); ???????????????????} ???????????????????//设改变单选框的值 ???????????????????$("[type=‘radio‘] :eq(1)").attr("checked", ‘checked‘); ???????????????} ???????????????//动态给下拉列表增加选项 ???????????????function addSelect() { ???????????????????var $unit = $("[name=‘unit‘]"); ???????????????????alert("多选框选中个数:" + $unit.length); ???????????????????$unit.append("<option value=‘3‘>部门3</option>"); ???????????????????$("<option value=‘4‘>部门4</option>").appendTo($unit); ???????????????} ???????????</script> ???????</center> ???</body></html>更多具体的可以参考:http://www.cnblogs.com/qlqwjy/p/7511814.html
jQuery操作下拉列表以及单选多选框
原文地址：http://www.cnblogs.com/qlqwjy/p/7512272.html