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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python3中for循环踩过的坑记录
2020/12/14 Python
ASP.NET Core中的配置详解
2021/02/05 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
opencv实现图像几何变换
2021/03/24 Python
仓管岗位职责范本
2014/02/08 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
体操比赛口号
2014/06/10 职场文书
认错检讨书
2014/10/02 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
2015年公司工作总结
2015/04/25 职场文书
消费者投诉书范文
2015/07/02 职场文书
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS