使用val()选中select/checkbox/radio的值

val()方法不仅能设置元素的值,同时也能获取元素的值。另外,val()方法还有另外一个用处,就是它能使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中,在表单操作中会经常用到。

下面先来演示val()方法的选中功能。


该网页中一些元素是默认选中的,可以通过val()方法来改变它们的选中项。如果要使第1个下拉框的第2项被选中,可以用以下JQuery代码实现:

$("#single").val("选择2号");

如果要使下拉列表的第2项和第3项被选中,可以用以下JQuery代码实现:

$("#multiple").val(["选择2号", "选择3号"]);

在JQuery中,val()方法是从最后一个选项往前读取,如果选项的value或者text中任意一项符合就会被选中。例如:

<option value="选择2号">选择1号</option>  
<option value="选择1号">选择2号</option>  

无论使用val("选择1号")还是val("选择2号"),都会选中后面一个<option value="选择1号">选择2号</option>。

依照上面类似的写法,下面的代码可以使多选框和单选框被选中,JQuery代码如下:

$(":checkbox").val(["check2","check3"]);   
(":radio").val(["radio2"]);

在上面这个例子中,可以使用val()方法,也可以使用attr()方法来实现同样的功能。

$("#single option:eq(1)").attr("selected",true); //设置属性selected   
$("[value=check2]:checkbox").attr("checked",true);//设置属性checked

本例演示效果的JQuery代码如下:

$(function(){
	//设置单选下拉框选中
	$("#btn_1").click(function(){
		$("#single").val("选择2号");
		$("#tips").text("下拉框第2项已被选中");
	});
 	//设置多选下拉框选中
	$("#btn_2").click(function(){
		$("#multiple").val(["选择2号", "选择3号"]);
		$("#tips").text("下拉框第2项与第3项同时被选中");
	});
	//设置单选框和多选框选中
	$("#btn_3").click(function(){
		$(":checkbox").val(["check2","check3"]);
		$(":radio").val(["radio2"]);
		$("#tips").text("复选框2、3项与单选按钮第2个被选中");
	});    
//]]>
});

zgguan.com(it学习网) — 提供最好的 XHTML教程DIV+CSS教程JavaScript教程PHP教程ThinkPHP教程