编程 Javascript

jquery操作select元素和option的实例代码

Posted in Javascript onFebruary 03, 2016

废话不多说了，直接给大家贴代码，具体代码如下所示：

<html>
<head>
  <title></title>
  <!--添加jquery-->
  <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      createSelect("addSel");
      addOption("addSel", "first", "第一个数据");
      addOption("addSel", "secord", "第二个数据");
      addOption("addSel", "three", "第三个数据");
      addOption("addSel", "four", "第四个数据");
      addOption("addSel", "fives", "第五个数据");
      removeOneByIndex("addSel", 0);
      removeOneByValue("addSel", "three");

      //****************以验证不可以根据text值取得option元素***********************
      //removeOneByText("addSel", "第三个数据");
      //****************以验证不可以根据text值取得option元素***********************

      //removeAll("addSel");   //删除select元素的所有options
      //removeSelect("addSel"); //删除select元素；

      setDefaultByValue("addSel", "four"); //设置option的默认值

      //添加一个option更改事件 调用自己写的方法
      $("#addSel").change(function () {
        alert("旧文本：" + getOptionText("addSel") + "   旧Value：" + getOptionValue("addSel"));
        editOptions("addSel", "新文本", "新Value"); //注意：不传value值的时候 value值默认为text的值
        alert("新文本：" + getOptionText("addSel") + "   新Value：" + getOptionValue("addSel"));
      })
    })

    //动态创建带id的select
    function createSelect(id) {
      $("body").append("<select id="+id+"></select>");
    }

    //根据select的id 添加选项option
    function addOption(selectID,value,text) {
      //根据id查找select对象， 
      var obj = $("#" + selectID + "");
      $("<option></option>").val(value).text(text).appendTo(obj);
    }

    //根据value的值设置options默认选中项
    function setDefaultByValue(selectID,value) {
      var obj = $("#" + selectID + "");
      obj.val(value);
    }

    //获得选中的Option Value；
    function getOptionValue(selectID) {
      //var obj = $("#" + selectID + " option:selected").val(); 
      //上面和下面两种都可以
      var obj = $("#" + selectID + "").find("option:selected").val();
      return obj;
    }

    //获得选中的option Text;
    function getOptionText(selectID) {
      //var obj = $("#" + selectID + " option:selected").text();
      //上面和下面两种都可以
      var obj = $("#" + selectID + "").find("option:selected").text();
      return obj;
    }

    //修改选中的option
    function editOptions(selectID, newText, newValue) {
      var obj = $("#" + selectID + "").find("option:selected");
      obj.val(newValue).text(newText);
    }

    //根据 index 值删除一个选项option
    function removeOneByIndex(selectID, index) {
      var obj = $("#" + selectID + " option[index=" + index + "]");
      obj.remove();
    }

    //根据 value值删除一个选项option
    function removeOneByValue(selectID, text) {
      var obj = $("#" + selectID + " option[value=" + text + "]");
      obj.remove();
    }

    //****************以验证不可以根据text值取得option元素***********************
    //根据text值删除一个选项option  感觉不可用 真的
    //function removeOneByText(selectID, text) {
    //var obj = $("#" + selectID + " option[text=" + text + "]");
    //obj.remove();
    //}
    //****************以验证不可以根据text值取得option元素***********************

    //删除所有选项option
    function removeAll(selectID) {
      var obj = $("#" + selectID + "");
      obj.empty();
    }

    //删除select
    function removeSelect(selectID){
      var obj = $("#" + selectID + "");
      obj.remove();
    }
  </script>
</head>
<body>

</body>
</html>

以上所述是小编给大家分享的jquery操作select元素和option的实例代码，希望对大家有所帮助。

- Author -

欧欧欧锋_

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子

May 30 Javascript

Lazy Load 延迟加载图片的jQuery插件中文使用文档

Oct 18 Javascript

JavaScript控制Session操作方法

Jan 17 Javascript

javascrip关于继承的小例子

May 10 Javascript

jquery插件pagination实现无刷新ajax分页

Sep 30 Javascript

JS判断元素是否在数组内的实现代码

Mar 30 Javascript

Angular.js与Bootstrap相结合实现表格分页代码

Apr 12 Javascript

Javascript从数组中随机取出不同元素的两种方法

Sep 22 Javascript

jQuery is not defined 错误原因与解决方法小结

Mar 19 Javascript

Bootstrap缩略图的创建方法

Mar 22 Javascript

实现jquery放大镜的两种方法

Feb 22 jQuery

微信小程序表单验证插件WxValidate的二次封装功能（终极版）

Sep 03 Javascript

Javascript获取统一管理的提示语(message)

Feb 03 #Javascript

javascript显示上周、上个月日期的处理方法

Feb 03 #Javascript

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

Feb 03 #Javascript

AngularJS向后端ASP.NET API控制器上传文件

Feb 03 #Javascript

javascript DIV实现跟随鼠标移动

Mar 19 #Javascript

javascript鼠标右键菜单自定义效果

Dec 08 #Javascript

JavaScript获取当前运行脚本文件所在目录的方法

Feb 03 #Javascript

You might like

php中看实例学正则表达式

2006/12/25 PHP

关于尾递归的使用详解

2013/05/02 PHP

解析PHP将对象转换成数组的方法(兼容多维数组类型)

2013/06/21 PHP

PHP实现批量上传单个文件

2015/12/29 PHP

php 访问oracle 存储过程实例详解

2017/01/08 PHP

PHP图片水印类的封装

2017/07/06 PHP

Thinkphp5.0框架视图view的模板布局用法分析

2019/10/12 PHP

JSON为什么那样红为什么要用json(另有洞天)

2012/12/26 Javascript

js的hasownproperty使用示例

2014/03/02 Javascript

javascript感应鼠标图片透明度显示的方法

2015/02/24 Javascript

介绍一个简单的JavaScript类框架

2015/06/24 Javascript

javascript深拷贝(deepClone)详解

2016/08/24 Javascript

获取IE浏览器Cookie信息的方法

2017/01/23 Javascript

从vue基础开始创建一个简单的增删改查的实例代码(推荐)

2018/02/11 Javascript

webpack4 从零学习常用配置(小结)

2019/05/28 Javascript

vue中改变滚动条样式的方法

2020/03/03 Javascript

[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局

2016/02/27 DOTA

使用Python的Flask框架实现视频的流媒体传输

2015/03/31 Python

Python字典操作简明总结

2015/04/13 Python

详解详解Python中writelines()方法的使用

2015/05/25 Python

python实现音乐下载器

2018/04/15 Python

python统计多维数组的行数和列数实例

2018/06/23 Python

解决python 自动安装缺少模块的问题

2018/10/22 Python

对Python实现简单的API接口实例讲解

2018/12/10 Python

python如何获取列表中每个元素的下标位置

2019/07/01 Python

python装饰器代替set get方法实例

2019/12/19 Python

在python3.64中安装pyinstaller库的方法步骤

2020/06/02 Python

StubHub智利：购买和出售您的门票

2016/11/23 全球购物

加拿大最大的相机店：Henry’s

2017/05/17 全球购物

促销活动总结模板

2014/07/01 职场文书

绍兴鲁迅故居导游词

2015/02/09 职场文书

2015年普法依法治理工作总结

2015/05/26 职场文书

女性健康知识讲座主持词

2015/07/04 职场文书

《夸父追日》教学反思

2016/02/20 职场文书

详细介绍Next.js脚手架完整搭建封装

2022/04/26 Javascript

大型强子对撞机再次重启探索“第五种自然力”

2022/04/29 数码科技