编程 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 相关文章推荐

document 和 document.all 分别什么时候用

Jun 22 Javascript

javascript 中对象的继承〔转贴〕

Jan 22 Javascript

一些技巧性实用js代码小结

Oct 14 Javascript

js中typeof的用法汇总

Dec 12 Javascript

Javascript数组操作函数总结

Feb 05 Javascript

jquery实现简单实用的打分程序实例

Jul 23 Javascript

微信小程序实战之轮播图（3）

Apr 17 Javascript

AngularJS日程表案例详解

Aug 15 Javascript

基于canvas粒子系统的构建详解

Aug 31 Javascript

JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】

Jan 19 Javascript

js实现聊天对话框

Feb 08 Javascript

vue用elementui写form表单时,在label里添加空格操作

Aug 13 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列出MySQL中所有数据库的方法

2015/03/12 PHP

基于OpenCart 开发支付宝，财付通，微信支付参数错误问题

2015/10/01 PHP

PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库

2015/11/25 PHP

Yii2框架可逆加密简单实现方法

2017/08/25 PHP

解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题

2019/10/16 PHP

详解no input file specified 三种解决方法

2019/11/29 PHP

基于jQuery的的一个隔行变色，鼠标移动变色的小插件

2010/07/06 Javascript

Javascript 判断是否存在函数的方法

2013/01/03 Javascript

textarea 控制输入字符字节数(示例代码)

2013/12/27 Javascript

jQuery内容过滤选择器用法分析

2015/02/10 Javascript

JavaScript判断按钮被点击的方法

2015/12/13 Javascript

浅谈javascript中的三种弹窗

2016/10/21 Javascript

Vue.js系列之项目搭建(1)

2017/01/03 Javascript

利用JavaScript如何查询某个值是否数组内

2017/07/30 Javascript

浅谈Angular2 模块懒加载的方法

2017/10/04 Javascript

Quasar Input:type="number" 去掉上下小箭头实现加减按钮样式功能

2020/04/09 Javascript

用javascript实现倒计时效果

2021/02/09 Javascript

[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26

2018/08/29 DOTA

Django基础之Model操作步骤(介绍)

2017/05/27 Python

pycharm运行出现ImportError:No module named的解决方法

2018/10/13 Python

Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能

2018/11/23 Python

Python实现性能自动化测试竟然如此简单

2019/07/30 Python

pandas条件组合筛选和按范围筛选的示例代码

2019/08/26 Python

python retrying模块的使用方法详解

2019/09/25 Python

python中栈的原理及实现方法示例

2019/11/27 Python

Python基于yield遍历多个可迭代对象

2020/03/12 Python

英国手机零售商：Carphone Warehouse

2018/06/06 全球购物

linux面试题参考答案（2）

2015/12/06 面试题

党员公开承诺书和承诺事项

2014/03/25 职场文书

课前一分钟演讲稿

2014/08/26 职场文书

八一建军节慰问信

2015/02/14 职场文书

2015年社区关工委工作总结

2015/04/03 职场文书

英文辞职信范文

2015/05/13 职场文书

python 爬取京东指定商品评论并进行情感分析

2021/05/27 Python

只用Python就可以制作的简单词云

2021/06/07 Python

教你部署vue项目到docker

2022/04/05 Vue.js