脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery操作select元素和option

jquery操作select元素和option的实例代码

 更新时间：2016年02月03日 17:14:50   作者：欧欧欧锋_  
这篇文章主要介绍了jquery操作select元素和option的实例代码，感兴趣的小伙伴们可以参考一下

废话不多说了，直接给大家贴代码，具体代码如下所示：

<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的实例代码，希望对大家有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery 页面 Mask实现代码

    jQuery 页面 Mask实现代码

    何为页面 Mask (遮罩)？看过 jQuery 的 Lightbox 插件的一定不会陌生。就是在页面上建一个透明层遮盖住页面的全部内部。
    2010-01-01
  • 深入了解query和params的使用区别

    深入了解query和params的使用区别

    这篇文章主要介绍了深入了解query和params的使用区别，路由传参的时候，有俩兄弟，一个叫query，一个叫parmas，你说他们俩长得也不像吧，可这用法实在是太类似了，下面就让我们分别从vue路由和Node接收两个角度讲他们的区别,需要的朋友可以参考下
    2019-06-06
  • jquery简单的弹出层浮动层代码

    jquery简单的弹出层浮动层代码

    一个简单的jquery弹出框代码实现，点击链接弹出模式对话框，任意点击网页的其它地方可以关闭弹出框，可以自定义透明度，简单实用的jquery弹出框效果。
    2015-04-04
  • jquery插件制作 自增长输入框实现代码

    jquery插件制作 自增长输入框实现代码

    本章我们将创建一个自增长的输入框插件，jquery.aotogrow.js
    2012-08-08
  • 使用异步controller与jQuery实现卷帘式分页

    使用异步controller与jQuery实现卷帘式分页

    这篇文章主要介绍了使用异步controller与jQuery实现卷帘式分页，使用异步controller与jQuery按需加载内容，当用户开始通过网站的内容滚动时进一步加载内容。,需要的朋友可以参考下
    2019-06-06
  • 节点的插入之append()和appendTo()的用法介绍

    节点的插入之append()和appendTo()的用法介绍

    说到节点的插入想必大家对append()和appendTo()的用法并不陌生吧，下面有个不错的是，希望对大家学习有所帮助
    2014-01-01
  • jQuery插件pagewalkthrough实现引导页效果

    jQuery插件pagewalkthrough实现引导页效果

    这篇文章主要介绍了jQuery插件pagewalkthrough实现引导页效果的方法和示例代码，十分的详细和实用，有需要的小伙伴可以参考下。
    2015-07-07
  • jQuery实现图片局部放大镜效果

    jQuery实现图片局部放大镜效果

    这篇文章主要介绍了jQuery实现图片局部放大镜效果的相关资料,需要的朋友可以参考下
    2016-03-03
  • jQuery从零开始做一个分页组件功能示例

    jQuery从零开始做一个分页组件功能示例

    这篇文章主要介绍了jQuery从零开始做一个分页组件功能,结合实例形式分析了jQuery分页组件的具体步骤、功能实现技巧与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 分享15个大家都熟知的jquery小技巧

    分享15个大家都熟知的jquery小技巧

    这篇文章主要分享了15个大家都熟知的jquery小技巧，帮助提高你jQuery应用的简单小技巧，感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论