Jquery对select的增、删、改、查操作

前端技术 2023/09/08 JavaScript

逃不开传统的四种操作：增、删、改、查。

<四处搜刮了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的增、删、改、查操作总结，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/22729

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案