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之小练习代码
Oct 12 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
15分钟上手vue3.0(小结)
May 20 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
原生js实现日期联动
2015/01/12 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
vue之延时刷新实例
2019/11/14 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
基于python实现地址和经纬度转换
2020/05/19 Python
keras 多任务多loss实例
2020/06/22 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技