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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
5 cool javascript apps
Mar 24 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
vue中get请求如何传递数组参数的方法示例
Nov 08 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
Yii2增加验证码步骤详解
2016/04/25 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python with提前退出遇到的坑与解决方案
2018/01/05 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
高三自我鉴定怎么写
2013/10/19 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
小区门卫岗位职责
2013/12/31 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
安全环保标语
2014/06/09 职场文书
医生见习报告范文
2014/11/03 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis