JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:
1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery添加/删除Select的Option项:
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
内容清空:
$("#charCity").empty();
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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 'checkbox_radio.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 href="web/css/ui-lightness/jquery-ui-1.9.0.custom.css"
rel="stylesheet">
<script src="web/js/jquery-1.8.2.js"></script>
<script src="web/js/jquery-ui-1.9.0.custom.js"></script>
<script type='text/javascript'>
$(document).ready(function()
{
window.console||console;
var list=["2013-1","2012-2","2012-1","2011-2","2011-1"];
for(var i=0;i<list.length;i++)
{
var time=list[i];
var year=time.substring(0,4);
var curUpYear=time.substring(5,6);
if(curUpYear==1)
{
alert(year+"上半年");
}
else if(curUpYear==2)
{
alert(year+"下半年");
}
}
$("#month").append("<option value='Value'>Text</option>");
$("#submitButton").click(function()
{
var data = $('input:checkbox:checked');
$("#lbl_message").empty();
$.each(data, function( i,item )
{
//alert(item.value);
});
var messages=$('input[name="message"]:checked');
$.each(messages,function(i,item)
{ //由于复选框一般选中的是多个,所以可以循环输出
if(i!=data.length-1)
{
$("#lbl_message").append(item.value+",");
}
else
{
$("#lbl_message").append(item.value);
}
});
$("#lbl_month").empty();
$("#lbl_month").append("<span>"+$("#month").attr("value")+"</span>");
$("#lbl_sex").empty();
//现实性别
$("#lbl_sex").append("<span>"+$("input[name='sex']:checked").attr("value")+"</span>");
});
});
</script>
</head>
<body>
<input type='radio' name='sex' value='man' checked>男</input>
<input type='radio' name='sex' value='woman' >女</input>
<input type='checkbox' id='sendMessage' name='message' value='1' >
发送短信
</input>
<input type='checkbox' id='sendMessage' name='message' value='2'>
发送邮件
</input>
<!--下拉框-->
<select id="month" name="month">
<option value="test1">11</option>
<option value="test2">22</option>
</select>
<input type='button' class='submit' id='submitButton' value='提交' />
<div id="show">
<div id="sel_show">
下拉框的值:<span id="lbl_month"></span>
</div>
<div id="cb_message">
消息:<span id="lbl_message"></span>
</div>
<div id="radio_sex">
性别:<span id="lbl_sex"></span>
</div>
</div>
</body>
</html>
</html>