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

JS 类型转换常见方法小结

May 31 Javascript

基于jQuery实现的扇形定时器附源码下载

Oct 20 Javascript

实例代码讲解jquery easyui动态tab页

Nov 17 Javascript

基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

Dec 24 Javascript

jQuery中的基本选择器用法学习教程

Apr 14 Javascript

使用Promise解决多层异步调用的简单学习心得

May 17 Javascript

基于gulp合并压缩Seajs模块的方式说明

Jun 14 Javascript

jQuery向父辈遍历的简单方法

Sep 18 Javascript

Bootstrap modal使用及点击外部不消失的解决方法

Dec 13 Javascript

angular动态删除ng-repaeat添加的dom节点的方法

Jul 20 Javascript

vue 组件中slot插口的具体用法

Apr 03 Javascript

详解auto-vue-file:一个自动创建vue组件的包

Apr 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