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

prototype class详解

Sep 07 Javascript

JS中style属性

Oct 11 Javascript

Javascript学习笔记之对象篇（四） : for in 循环

Jun 24 Javascript

js实现在网页上简单显示时间的方法

Mar 02 Javascript

javascript创建函数的20种方式汇总

Jun 23 Javascript

js获取时间函数及扩展函数的方法

Oct 30 Javascript

javascript 日期相减-在线教程(附代码)

Aug 17 Javascript

浅谈js中的this问题

Aug 31 Javascript

Angular2整合其他插件的方法

Jan 20 Javascript

Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码

May 21 Javascript

vue 右键菜单插件简单、可扩展、样式自定义的右键菜单

Nov 29 Javascript

JS实现电话号码的字母组合算法示例

Feb 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