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

2019-11-20 10:37:08

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：Node.js重新刷新session过期时间的方法

下一篇：Javascript获取统一管理的提示语(message)