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 类型转换常见方法小结
May 31 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 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下使用SMTP发邮件的代码
2008/01/10 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
elementUI select组件value值注意事项详解
2019/05/29 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python装饰器代码深入讲解
2021/03/01 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
致接力运动员广播稿
2014/02/17 职场文书
市场营销求职信范文
2014/02/21 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
cf收人广告词
2014/03/14 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
工商管理本科生求职信
2014/07/13 职场文书
教师自我剖析材料
2014/09/29 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang