0

0

JQuery 对 Select option 的操作

巴扎黑

巴扎黑

发布时间:2017-06-29 10:02:40

|

1258人浏览过

|

来源于php中文网

原创

下拉框:


select id="selectID" >
        
option value="1">1option>
        
option value="2">2option>
        
option value="3">3option>
        
option value="4">4option>
        
option value="5">5option>
        
option value="6">6option>
    
select>

 

 

 下面是对下拉框的基本操作:

 


script language="javascript">
        $(document).ready(function() {
        
//绑定下拉框change事件,当下来框改变时调用 SelectChange()方法
        $("#selectID").change(function() { SelectChange(); }); 
        })
        function SelectChange() {
        
//获取下拉框选中项的text属性
        var selectText = $("#selectID").find("option:selected").text();
        alert(selectText);
        
//获取下拉框选中项的value属性值
        var selectValue = $("#selectID").val();
        alert(selectValue);
        
//获取下拉框选中项的index属性值
        var selectIndex = $("#selectID").get(0).selectedIndex;
        alert(selectIndex);
        
////获取下拉框最大的index属性值
        var selectMaxIndex = $("#selectID option:last").attr("index");
        alert(selectMaxIndex);
    }

    function aa() {
        
//设置下拉框index属性为5的选项 选中
        $("#selectID").get(0).selectedIndex = 5;  
    }
    function bb() {
        
//设置下拉框value属性为4的选项 选中
        $("#selectID").val(4);
    }
    function cc() {
        
//设置下拉框text属性为5的选项 选中
         $("#selectID option[text=5]").attr("selected""selected");

         $("#yyt option:contains('5')").attr("selected"true);

    }
    function dd() {
        
//在下拉框最后添加一个选项
        $("#selectID").append("");
    }
    function ee() {
        
//在下拉框最前添加一个选项
        $("#selectID").prepend("")
    }
    function ff() {
        
//移除下拉框最后一个选项
        $("#selectID option:last").remove();
    }

    function gg() {
        
//移除下拉框 index属性为1的选项
        $("#selectID option[index=1]").remove();
    }

    function hh() {
        
//移除下拉框 value属性为4的选项
        $("#selectID option[value=4]").remove();
    }
    function ii() {
        
//移除下拉框 text属性为5的选项
        $("#selectID option[text=5]").remove();
    }    
    
script>

 

 

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

57

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

237

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

393

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

17

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

103

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

73

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

81

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

70

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
玩转 Vue3.0 新特性
玩转 Vue3.0 新特性

共19课时 | 1.8万人学习

jQuery 教程
jQuery 教程

共42课时 | 4.8万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号