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 兼容鼠标滚轮事件
Apr 07 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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 session有效期问题
2009/04/26 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
python处理json数据中的中文
2014/03/06 Python
Django中处理出错页面的方法
2015/07/15 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
研修第一天随笔感言
2014/02/15 职场文书
学前班评语大全
2014/05/04 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
转让协议书范本
2014/09/13 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
离婚财产分配协议书
2014/10/21 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
校车司机安全责任书
2015/05/11 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
法制主题班会教案
2015/08/13 职场文书
远程教育培训心得体会
2016/01/09 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
vue完美实现el-table列宽自适应
2021/05/08 Vue.js