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 相关文章推荐
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
vue 导出文件,携带请求头token操作
Sep 10 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 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&amp;&amp;mysql)四
2006/10/09 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
非常好的js代码
2006/06/27 Javascript
jQuery textarea的长度进行验证
2009/05/06 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
浅析vue-router原理
2018/10/19 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Python生成随机数的方法
2014/01/14 Python
python写xml文件的操作实例
2014/10/05 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
电厂职工自我鉴定
2014/02/20 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
早安问候语大全
2015/11/10 职场文书
《社戏》教学反思
2016/02/22 职场文书
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫