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 相关文章推荐
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
JQuery学习总结【一】
Dec 01 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 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中使用Imagick操作PSD文件实例
2015/01/26 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
python中使用序列的方法
2015/08/03 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Python阶乘求和的代码详解
2020/02/14 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
写给学生的新学期寄语
2014/01/18 职场文书
学生打架检讨书
2014/02/14 职场文书
小学安全汇报材料
2014/08/14 职场文书
怎样写离婚协议书
2014/09/10 职场文书
单位委托书
2014/10/15 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python