>

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

- 编辑:正版管家婆马报彩图 -

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的实例代码,希望对咱们具有帮衬。

<select id="search">
<option>baidu</option>
<option>sogou</option>
</select>

你大概感兴趣的篇章:

  • jQuery获取select选中的option的value值达成方式
  • JQuery动态增添Select的Option成分完成情势
  • Jquery遍历select option和加多移除option的兑现情势
  • JS & JQuery 动态增进 select option
  • jQuery操作Select的Option上下运动及移除增添等等
  • JQuery中对Select的option项的增加、删除、取值
  • jquery操作select option 的代码小结
  • jquery获取select,option所有的value和text的实例

清空:

复制代码 代码如下:

$("#search").find("option").remove();
或者
$("#search").empty();

您或然感兴趣的篇章:

  • jQuery获取select选中的option的value值实现格局
  • JQuery动态增加Select的Option成分达成形式
  • JS & JQuery 动态拉长 select option
  • jQuery操作Select的Option上下运动及移除增加等等
  • JQuery中对Select的option项的增加、删除、取值
  • 浅析jQuery对select操作小结(遍历option,操作option)
  • jQuery化解下拉框select设宽度时IE 6/7/8下option越过展现不全
  • JQuery操作Select的Options的Bug(IE8包容性视图情势)
  • jquery操作select option 的代码小结
  • jQuery动态发生select option下拉列表

本文由网络计算发布,转载请注明来源:jquery操作select元素和option的实例代码