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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
常用DOM整理
Jun 16 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
vue特效之翻牌动画
Apr 20 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
ini_set的用法介绍
2014/01/07 PHP
Destoon模板制作简明教程
2014/06/20 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
深入理解Node module模块
2018/03/26 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
python对数组进行反转的方法
2015/05/20 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Python测试线程应用程序过程解析
2019/12/31 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python实现感知机模型的示例
2020/09/30 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
什么是封装
2013/03/26 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
施工安全责任协议书
2016/03/23 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python