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 相关文章推荐
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
jquery操作select大全
Apr 25 Javascript
下拉框select的绑定示例
Sep 04 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
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.MVC的模板标签系统(五)
2006/09/05 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
Javascript之String对象详解
2016/06/08 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
Python深入学习之对象的属性
2014/08/31 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
小学数学教学反思
2014/02/02 职场文书
中文专业求职信
2014/06/20 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
护士先进个人总结
2015/02/13 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis