您的位置：首页 > Web前端 > JQuery

jQuery操作select

2014-04-29 16:57 337 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航