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的实例代码,希望对大家有所帮助。

Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;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 数码科技