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

JQuery操作单选按钮，复选框，下拉款的操作

2013-06-23 17:56 489 查看

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>

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

标签：

相关文章推荐

新的分享

章节导航