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 相关文章推荐
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
JS数组的赋值介绍
Mar 10 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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初学者头疼十四条问题大总结
2008/11/12 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JQuery EasyUI的使用
2016/02/24 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
序列化模块json代码实例详解
2020/03/03 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
python实现3D地图可视化
2020/03/25 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
大学生四个方面的自我评价
2013/09/19 职场文书
小学教师节活动方案
2014/01/31 职场文书
消防志愿者活动方案
2014/08/23 职场文书
师德师风自查材料
2014/10/14 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
少先队工作总结2015
2015/05/13 职场文书
小人国观后感
2015/06/11 职场文书
三八节祝酒词
2015/08/11 职场文书