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

最新推荐文章于 2022-05-16 16:07:08 发布

wangyijun1

最新推荐文章于 2022-05-16 16:07:08 发布

阅读量727

点赞数 1

本文链接：https://blog.csdn.net/wangyijun1/article/details/9156103

版权

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>

wangyijun1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery操作单选按钮，复选框，下拉款的操作

JQuery中对option的添加、删除、取值jQuery获取Select选择的Text和Value:1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text()
复制链接

扫一扫