zoukankan      html  css  js  c++  java
  • jQuery操作select

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script>
    	
    	$(function(){
    		//获取第一个option的值
    		var firstval=$('#selectID option:first').val();
    		alert(firstval);
    		
    		//获取最后一个option的值
    		var lastval =$('#selectID option:last').val();
    		alert(lastval);
    		
    		//获取第二个option的值
    		var secondval =$('#selectID option:eq(1)').val();
    		alert (secondval);
    		
    		//获取选中项的值
    		var selectedval =$('#selectID option:selected').val();
    		alert(selectedval);
    		
    		//设置值为3的option为选中状态
    		$('#selectID').attr('value','3');
    		
    		//设置最后一个option为选中状态
    		$('#selectID option:last').attr('selected','selected');
    		$('#selectID').attr('value',$('#selectID option:last').val());
    		$('#selectID').attr('value',$('#selectID option').eq($('#selectID option').length-1).val());
    		
    		//获取select的长度
    		var selectlength =$('#selectID option').length;
    		alert(selectlength);
    		
    		//加入一个option
    		$('#selectID').append("<option value='n+1'>第n+1项</option>");
    		$("<option value='n+1'>第n+1项</option>>").appendTo('#selectID');
    		
    		//删除选中项
    		$('#selectID option:selected').remove();
    		
    		//删除第一项
    		$('#selectedID option:first').remove();
    		
    		//指定值被删除
    		$('#selectedID option').each(function(){
    			if($(this).val()=='3'){
    				$(this).remove();	
    			}
    		});
    		
    		
    	})
    </script>
    </head>
    
    <body>
    <select id ="selectID">
    	<option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
        <option value="n">选项n</option>
    </select>
    </body>
    </html>

  • 相关阅读:
    更好的处理 Python 多工程 import 依赖
    Django 前后台的数据传递
    Django传递数据给JS
    nodejs 设置跨域访问
    Node.js + Express
    前端用户输入校验--基于JQ
    git统计当前分支提交次数
    gitlab相关
    CentOS7使用firewalld打开关闭防火墙与端口
    puppeteer安装/爬取数据
  • 原文地址:https://www.cnblogs.com/mqxnongmin/p/10768483.html
Copyright © 2011-2022 走看看