jQuery操作select

时间：2014-07-22 23:02:15 收藏：0 阅读：367
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
	
	$(function(){
		//获取第一个option的值
		var firstval=$(‘#selectID option:first‘).val();
		alert(firstval);
		
		//获取最后一个option的值
		var lastval =$(‘#selectID option:last‘).val();
		alert(lastval);
		
		//获取第二个option的值
		var secondval =$(‘#selectID option:eq(1)‘).val();
		alert (secondval);
		
		//获取选中项的值
		var selectedval =$(‘#selectID option:selected‘).val();
		alert(selectedval);
		
		//设置值为3的option为选中状态
		$(‘#selectID‘).attr(‘value‘,‘3‘);
		
		//设置最后一个option为选中状态
		$(‘#selectID option:last‘).attr(‘selected‘,‘selected‘);
		$(‘#selectID‘).attr(‘value‘,$(‘#selectID option:last‘).val());
		$(‘#selectID‘).attr(‘value‘,$(‘#selectID option‘).eq($(‘#selectID option‘).length-1).val());
		
		//获取select的长度
		var selectlength =$(‘#selectID option‘).length;
		alert(selectlength);
		
		//添加一个option
		$(‘#selectID‘).append("<option value=‘n+1‘>第n+1项</option>");
		$("<option value=‘n+1‘>第n+1项</option>>").appendTo(‘#selectID‘);
		
		//删除选中项
		$(‘#selectID option:selected‘).remove();
		
		//删除第一项
		$(‘#selectedID option:first‘).remove();
		
		//指定值被删除
		$(‘#selectedID option‘).each(function(){
			if($(this).val()==‘3‘){
				$(this).remove();	
			}
		});
		
		
	})
</script>
</head>

<body>
<select id ="selectID">
	<option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
    <option value="n">选项n</option>
</select>
</body>
</html>
jQuery操作select,码迷,mamicode.com