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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
js数组的基本使用总结
Jan 18 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python中元类用法实例
2014/10/10 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
使用Python实现音频双通道分离
2020/12/25 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
高中班级口号
2014/06/09 职场文书
邀请书格式范文
2015/02/02 职场文书
如何计划开一家便利店?
2019/07/31 职场文书