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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
JavaScript中继承原理与用法实例入门
May 09 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/23 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Python正则表达式使用经典实例
2016/06/21 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
使用Python写一个小游戏
2018/04/02 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Python实现石头剪刀布游戏
2021/01/20 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
前台领班岗位职责
2013/12/04 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
供货协议书
2014/04/22 职场文书
验房委托书
2014/08/30 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库