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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
jQuery 使用手册(四)
Sep 23 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
优雅的处理vue项目异常实战记录
Jun 05 Javascript
js实现指定时间倒计时效果
Aug 26 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
我的论坛源代码(一)
2006/10/09 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
html下载本地
2006/06/19 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python解析json代码实例解析
2019/11/25 Python
Python错误的处理方法
2020/06/23 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
什么是类的返射机制
2016/02/06 面试题
优秀班集体获奖感言
2014/02/03 职场文书
电焊工岗位职责
2014/03/06 职场文书
中秋寄语大全
2014/04/11 职场文书
助理政工师申报材料
2014/06/03 职场文书
宾馆安全管理制度
2015/08/06 职场文书
python批量创建变量并赋值操作
2021/06/03 Python