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是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
基于JavaScript实现随机点名器
Feb 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
什么是唯一索引
2015/07/05 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
高中化学教学反思
2014/01/13 职场文书
人事局接收函
2015/01/30 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
python缺失值填充方法示例代码
2022/12/24 Python