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 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
如何更好的编写js async函数
May 13 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 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简单装饰器模式实现与用法示例
2017/06/22 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
使用Python生成url短链接的方法
2015/05/04 Python
Python算法应用实战之队列详解
2017/02/04 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python模块 _winreg操作注册表
2020/02/05 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
《菜园里》教学反思
2014/04/17 职场文书
优秀会计求职信
2014/07/04 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
个人廉洁自律总结
2015/03/06 职场文书
小学校园广播稿
2015/08/18 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
利用python进行数据加载
2021/06/20 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js