Jquery对select的增、删、改、查操作

逃不开传统的四种操作：增、删、改、查。

<四处搜刮了jquery对select操作的代码，汇集一下，方便以后查看。日历天数变化代码为原创。>

[增]：

代码如下:

$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

[删]：

代码如下:

$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
$("#select_id").empty(); //清空

[改](设置选中项)：

代码如下:

$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id ").val(4); //设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

[查](获取选中值):

1.获取选中项的value

代码如下:

$("#select_id").val(); //获取选中项的value
$("#select_id ").get(0).selectedIndex; //获取选中项的索引值
$("#select_id").find("option:selected").text(); //获取选中项的text
$("#select_id option:last").attr("index"); //获取Select最大的索引值

附上代码样例，代码功能为根据实际选择的“年”、“月”，来改变select“日”中option的天数。

使用php编写，默认$("select.day")初始有31天，因为默认为1月：

代码如下:

<select name ="date_year" class="year"> //年
    <?php
    for ($year = 1990; $year <= date("Y"); ++$year) {
    ?>
        <option value="<?php echo $year;?>"><?php echo $year;?></option>
    <?php
    }
    ?>
</select>

代码如下:

<select name ="date_month" class="month"> //月
    <?php
    for ($month = 1; $month <= 12; ++$month) {
    ?>
        <option value="<?php echo $month;?>"><?php echo $month;?></option>
    <?php
    }
    ?>
</select>

代码如下:

<select name ="date_day" class="day"> //日
    <?php
    for ($day = 1; $day <= 31; ++$day) {
    ?>
        <option value="<?php echo $day;?>"><?php echo $day;?></option>
     <?php
     }
     ?>
</select>

jquery代码：

代码如下:

$(document).ready(function() {
    $("select.month, select.year").change(function() { //"年"、"月"的变化都可能引起“日”的变化
        $("select.day").empty(); //非常重要，要先清空
        for (var i = 1; i < 31; i++) {
            var option = $("<option>").val(i).text(i);
            $("select.day").append(option);
        }
        var month = $("select.month").val();
        if ((month % 2 && month < 8) || (month % 2 === 0 && month > 7)) {
            $("select.day").append("<option value='31'>31</option>"); //天数为31天的append一个option
        }
        if (month === 2) {
            $("select.day option:last").remove();
            $("select.day option:last").remove(); //2月天数28
            var year = $("select.year").val();
            if ((year % 4 === 0 && year % 100) || year % 400 === 0)
                $("select.day").append("<option value='29'>29</option>"); //闰年2月天数加一
        }
    });
});

以上就是关于jQuery实现对select的增、删、改、查操作总结，希望大家能够喜欢。

赞 (0)

相关推荐

  • jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

  • jquery实现动态操作select选中

    今天因为有项目需要动态操作select选中 习惯在百度上搜了一下 ,结果还是挺多的.试了其中一个 发现不能使用.打开第2,3 个发现都是一样的然后自己稍微研究了一下 复制代码 代码如下: //初始化select,第一个选中             $('#stoStoreCategoryID').get(0).selectedIndex=0;             $("#stoStoreCategoryID option").each(function(i,n){         

  • jQuery操作Select选择的Text和Value(获取/设置/添加/删除)

    jQuery获取Select选择的Text和Value: 选择一项试试看 语法解释: 复制代码 代码如下: . $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 . var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text . var checkValu

  • 浅析jQuery对select操作小结(遍历option,操作option)

    //遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each(function(){   if($(this).val() == 111){   

  • jquery操作select大全

    添加option 复制代码 代码如下: $('#id').append("<option value="value">Text</option>");//为select追加一个option$('#id').prepend("<option value='0'>Text</option>");   //为select插入一个option 移除option 复制代码 代码如下: $("#ID

  • jQuery中的select操作详解

    下面给大介绍了jquery对select的操作介绍,非常不错,具有内容介绍如下所示: select的html标签如下: <select class="xxx" id="yyy"><option></option>...<option></option></select> 1.设置value为"lll"的option选中 $('#yyy').val("lll"

  • jquery操作select详解(取值,设置选中)

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr(&qu

  • JQuery操作textarea,input,select,checkbox方法

    JQuery操作textarea,input,select,checkbox方法

    今天学习怎样用JQuery编写一些小的代码,小小的试了一下编写一个textarea,代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css" media="screen"> *{ marg

  • 简单的php数据库操作类代码(增,删,改,查)

    数据库操纵基本流程为: 1.连接数据库服务器 2.选择数据库 3.执行SQL语句 4.处理结果集 5.打印操作信息 其中用到的相关函数有 •resource mysql_connect ( [string server [, string username [, string password [, bool new_link [, int client_flags]]]]] ) 连接数据库服务器•resource mysql_pconnect ( [string server [, strin

  • Struts2实现CRUD(增 删 改 查)功能实例代码

    Struts2实现CRUD(增 删 改 查)功能实例代码

    CRUD是Create(创建).Read(读取).Update(更新)和Delete(删除)的缩写,它是普通应用程序的缩影.如果您掌握了某框架的CRUD编写,那么意味可以使用该框架创建普通应用程序了,所以大家使用新框架开发OLTP(Online Transaction Processing)应用程序时,首先会研究一下如何编写CRUD.这类似于大家在学习新编程语言时喜欢编写"Hello World". 本文旨在讲述Struts 2上的CRUD开发,所以为了例子的简单易懂,我不会花时间在数

  • Python连接SQLite数据库并进行增册改查操作方法详解

    SQLite简介 SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了.它能够支持Windows/Linux/Unix等等主流的操作系统,同时能够跟很多程序语言相结合,比如 Tcl.C#.PHP.Java等,还有ODBC接口,同样比起Mysql.PostgreSQL这两款开

  • 使用Express+Node.js对mysql进行增改查操作 

    前言: 今天发的是Express对mysql进行增删改操作的所有代码,这个代码还没有完善好,都是一些基础的增删改查操作,有一些地方也写上了注释方便大家查看,还有更方便管理的方法,后续再给大家更新把. 最近要是有时间就会把文章写出来给大家,希望想要学习的朋友都能学习顺利. server.js文件夹完整的代码示例: // 引入 express 框架 const express = require('express') const mysql = require("mysql"); cons

  • Python3操作MongoDB增册改查等方法详解

    MongoDB是由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活. 在这一节中,我们就来看看Python 3下MongoDB的存储操作. 1. 准备工作 在开始之前,请确保已经安装好了MongoDB并启动了其服务,并且安装好了Python的PyMongo库. 2. 连接MongoDB 连接MongoDB时,我们需要使用PyMongo库里面的MongoClient.一般来说,传入Mong

  • Jquery对select的增、删、改、查操作

    逃不开传统的四种操作:增.删.改.查. <四处搜刮了jquery对select操作的代码,汇集一下,方便以后查看.日历天数变化代码为原创.> [增]: 复制代码 代码如下: $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) $("#select_id").prepend("&l

  • oracle监控某表变动触发器例子(监控增,删,改)

    使用oracle触发器 实现对某个表的增改删的监控操作,并记录到另一个表中. 代码: 复制代码 代码如下: create or replace trigger test_trigger    before insert or update or delete on test_table    for each row  declare    v_id        varchar2(30);    v_bdlb      varchar2(1);    v_jgdm      VARCHAR2(

  • 使用DataTable更新数据库(增,删,改)

    1.修改数据 复制代码 代码如下: DataRow dr = hRDataSet.Tables["emp"].Rows.Find(textBox3.Text);            //DataRow dr = hRDataSet.Tables["emp"].Select("id="+textBox3.Text)[0];            dr.BeginEdit();            dr["name"] = t

  • JS操作图片(增,删,改) 例子

    JS操作图片(增,删,改) 例子

    复制代码 代码如下: <!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>    <title></titl

  • 微信小程序 增、删、改、查操作实例详解

    微信小程序 增、删、改、查操作实例详解

    微信小程序 增.删.改.查操作实例详解 1.以收货地址的增删改查为例 2.文件目录 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html <form bindsubmit="addSubmit"> <view class="consignee"> <text class="consignee-tit&q

随机推荐