JQuery对select的操作
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" media="all" type="text/css" href="/css/screen.css" />
<link rel="stylesheet" media="all" type="text/css" href="/css/examples.css" />
<script type="text/javascript" src="<%=path %>/js/jquery/jquery.js"></script>
<script language="javascript" src="<%=path %>/js/jquery/jquery.select.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery/effects.core.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery/effects.highlight.js"></script>
<script type="text/javascript" src="/js/jquery.corner.js"></script>
<script type="text/javascript" src="/js/jquery-impromptu.1.5.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript">
jQuery(function($)
{
//获取select文本和值
$("#submitBut").click(function(){
//注意空格
//var strText = $("select[@name=fselect] option[@selected]").text();
// var strValue = $("select[@name=fselect] option[@selected]").val();
//alert(strText + ":" + strValue);
/*
//选中值为t3项
$("#fselect").attr("value", "t3");
//选中第二项
$('#fselect')[0].selectedIndex = 1;
*/
alert($("#fselect")[0].length);
});
//select改变时获取当前选项的值和文本
$("#fselect").change(function(){
//获取总的选项
//alert($(this)[0].length);
//获取的所有的文本
var strText = $(this).text();
//获取当前选中值
var strValue = $(this).val();
//alert(strText + ":" + strValue);
//选中值为t3项
//选中第二项
//$(this)[0].selectedIndex = 3;
//$(this).attr("value", "t3");
/ /$("#fselect")[0].options[2].selected = true;
//获得当前选中的文本
//显示索引为2的文本
var nCurrent = $(this)[0].selectedIndex;
alert($("#fselect")[0].options[nCurrent].text);
alert(strValue);
});
//增加select
$("#add").click(function(){
var nLength = $("#fselect")[0].length;
var option = document.createElement("option");;
option.text = "Text" + (nLength+1).toString();
option.value = "t" + (nLength+1).toString();
$("#fselect")[0].options.add(option);
//$("#fselect").addOption("Text" + (nLength+1).toString(), "t" + (nLength+1).toString(), true);
});
//清空select
$("#clear").click(function(){
$("#fselect").empty();
});
//清空一项
$("#remove").click(function(){
var index = $("#fselect")[0].selectedIndex;
//$("#fselect")[0].remove(index);
$("#fselect")[0].options[index] = null;
});
})
</script>
</head>
<body>
<select name="fselect" id="fselect">
<option value='t1'>Test1</option>
<option value='t2'>Test2</option>
<option value='t3'>Test3</option>
<option value='t4'>Test4</option>
</select>
<input type="button" name="submitBut" id="submitBut" value="submit" >
<input type="button" name="add" id="add" value="add" >
<input type="button" name="clear" id="clear" value="clear" >
<input type="button" name="remove" id="remove" value="remove" >
</body>
</html>
