<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery Select option</title>
<script type="text/javascript" src="<%=basePath%>/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
var year=$("#year");
year.append("<option value='0'>一年级</option>"); //添加下拉列表
year.append("<option value='1'>二年级</option>");
year.append("<option value='2'>三年级</option>");
$("<option value='3'>四年级</option>").appendTo(year); //添加下拉列表
$("<option></option>").val("4").text("五年级").appendTo(year); //添加下拉列表
$("<option></option>").val("5").text("六年级").prependTo(year); //追加下拉列表到开头
$("option[value='1']").remove(); //移除value值为1的下拉选项
grade.val("2"); //设置默认的选中状态
var maxYearIndex=grade.find("option:last").attr("value"); //获取最后一个下拉选项的value值属性
var yearText=grade.find("option:first").text(); //获取最后一个下拉选项的文本内容
//year.empty(); //清空下拉列表选项
year.change(function(){
alert($(this).find("option[value='3']").text());
});
alert(yearText);
});
</script>
</head>
<body>
<select id="year"></select>
</body>
</html>
以上代码来自这里(略作修改)并没有亲自验证(后续如有验证,会对文章修改)
<script language="javascript">
$(document).ready(function() {
//绑定下拉框change事件,当下来框改变时调用 SelectChange()方法
$("#selectID").change(function() { SelectChange(); });
})
function SelectChange() {
//获取下拉框选中项的text属性值
var selectText = $("#selectID").find("option:selected").text();
alert(selectText);
//获取下拉框选中项的value属性值
var selectValue = $("#selectID").val();
alert(selectValue);
//获取下拉框选中项的index属性值
var selectIndex = $("#selectID").get(0).selectedIndex;
alert(selectIndex);
////获取下拉框最大的index属性值
var selectMaxIndex = $("#selectID option:last").attr("index");
alert(selectMaxIndex);
}
function aa() {
//设置下拉框index属性为5的选项 选中
$("#selectID").get(0).selectedIndex = 5;
}
function bb() {
//设置下拉框value属性为4的选项 选中
$("#selectID").val(4);
}
function cc() {
//设置下拉框text属性为5的选项 选中
$("#selectID option[text=5]").attr("selected", "selected");
$("#yyt option:contains('5')").attr("selected", true);
}
function dd() {
//在下拉框最后添加一个选项
$("#selectID").append("<option value='7'>7</option>");
}
function ee() {
//在下拉框最前添加一个选项
$("#selectID").prepend("<option value='0'>0</option>")
}
function ff() {
//移除下拉框最后一个选项
$("#selectID option:last").remove();
}
function gg() {
//移除下拉框 index属性为1的选项
$("#selectID option[index=1]").remove();
}
function hh() {
//移除下拉框 value属性为4的选项
$("#selectID option[value=4]").remove();
}
function ii() {
//移除下拉框 text属性为5的选项
$("#selectID option[text=5]").remove();
}
</script>
这部分代码取自
这里,文章做成时用到了 在下拉框最前面添加选项的方法(prepend),实测youxiao