jQuery中下拉框select的操作方法详解

最新推荐文章于 2024-09-13 21:58:54 发布

16546498

最新推荐文章于 2024-09-13 21:58:54 发布

阅读量1.8k

点赞数

文章标签： jquery 框架

本文链接：https://blog.csdn.net/flamezyg/article/details/6655940

版权

最近在写页面的时候常常遇到要动态增删改下拉框select的情况，由于我比较习惯用jquery框架来架构我的前端js，所以就顺便把各种jquery操作下拉框select的方法总结了一下，收藏起来以便下次用到的时候拿出来翻翻，当然也把这些分享给大家，或许收藏它会给你今后写jquery带来方便。

1、jquery获取当前选中select的text值

 
        var 
         checkText=$( 
        "#slc1" 
        ).find( 
        "option:selected" 
        ).text();

2、jquery获取当前选中select的value值

 
        var 
         checkValue=$( 
        "#slc1" 
        ).val();

3、jquery获取当前选中select的索引值

 
        var 
         index=$( 
        "#slc1 " 
        ).get(0).selectedIndex;

4、jquery获取指定select的最大索引值

 
        var 
         maxIndex=$( 
        "#slc1 option:last" 
        ).attr( 
        "index" 
        );

5、jquery设置索引值为1的项为当前选中项

 
        $( 
        "#slc1 " 
        ).get(0).selectedIndex=1;

6、jquery设置value值2的项为当前选中项

 
        $( 
        "#slc1 " 
        ).val(2);

7、jquery设置text值为"青藤园"的项为当前选中项

 
        $( 
        "#slc1 option[text='青藤园']" 
        ).attr( 
        "selected" 
        ,  
        true 
        );

8、为指定select下拉框追加一个option（追加到在末尾）

 
        $( 
        "#slc2" 
        ).append( 
        "" 
        +i+ 
        "" 
        );

9、为制定select下拉框插入一个option（插入到第一个位置）

 
        $( 
        "#slc2" 
        ).prepend( 
        "请选择" 
        );

10、jquery删除select下拉框的最后一个option

 
        $( 
        "#slc2 option:last" 
        ).remove();

11、jquery删除select下拉框索引值为0的option

 
        $( 
        "#slc2 option[index='0']" 
        ).remove();

12、jquery删除select下拉框value为2的option

 
        $( 
        "#slc2 option[value='2']" 
        ).remove();

13、jquery删除select下拉框text为“青藤园”的option

 
        $( 
        "#slc2 option[text='青藤园']" 
        ).remove();

好了，差不多用的比较多也就这些，其他的可以根据以上的例子进行举一反三，需要的同学就收藏了吧，以后可以为你节省很多时间的那！

关注