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 相关文章推荐
jQuery 遍历json数组的实现代码
Sep 22 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
python3个性签名设计实现代码
2018/06/19 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python 阶乘累加和的实例
2019/02/01 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
利用python汇总统计多张Excel
2020/09/22 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
临床护士自荐信
2014/01/31 职场文书
网站客服岗位职责
2014/04/05 职场文书
清洁工个人总结
2015/03/04 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python