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


Posted in Javascript onFebruary 06, 2015

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

<四处搜刮了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的增、删、改、查操作总结,希望大家能够喜欢。

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 #Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 #Javascript
js实现多选项切换导航菜单的方法
Feb 06 #Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 #Javascript
javascript强制点击广告的方法
Feb 06 #Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 #Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 #Javascript
You might like
解析php类的注册与自动加载
2013/07/05 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Cpy和Python的效率对比
2015/03/20 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
python列表的增删改查实例代码
2018/01/30 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Django 重写用户模型的实现
2019/07/29 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
旅游管理专业学生求职信
2013/09/28 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
读书活动实施方案
2014/03/10 职场文书
妇女工作先进事迹
2014/08/17 职场文书
房屋过户委托书范本
2014/10/07 职场文书
白酒代理协议书范本
2014/10/26 职场文书
房产公证书
2015/01/23 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
nginx优化的六点方法
2021/03/31 Servers
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫