码迷,mamicode.com
首页 > Web开发 > 详细

jQuery操作select

时间:2014-07-22 23:02:15      阅读:367      评论:0      收藏:0      [点我收藏+]

标签:blog   http   java   io   2014   re   

<!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

jQuery操作select

标签:blog   http   java   io   2014   re   

原文地址:http://blog.csdn.net/wangboxian/article/details/24726623

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!