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 相关文章推荐
不懂JavaScript应该怎样学
Apr 16 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
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
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHP实现合并discuz用户
2015/08/05 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
会计实习自我鉴定
2013/12/04 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
大明湖导游词
2015/02/03 职场文书
生产设备维护保养制度
2015/08/06 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS