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", "第一個數(shù)據(jù)");
      addOption("addSel", "secord", "第二個數(shù)據(jù)");
      addOption("addSel", "three", "第三個數(shù)據(jù)");
      addOption("addSel", "four", "第四個數(shù)據(jù)");
      addOption("addSel", "fives", "第五個數(shù)據(jù)");
      removeOneByIndex("addSel", 0);
      removeOneByValue("addSel", "three");

      //****************以驗證不可以根據(jù)text值取得option元素***********************
      //removeOneByText("addSel", "第三個數(shù)據(jù)");
      //****************以驗證不可以根據(jù)text值取得option元素***********************

      //removeAll("addSel");   //刪除select元素的所有options
      //removeSelect("addSel"); //刪除select元素；

      setDefaultByValue("addSel", "four"); //設置option的默認值

      //添加一個option更改事件 調(diào)用自己寫的方法
      $("#addSel").change(function () {
        alert("舊文本：" + getOptionText("addSel") + "   舊Value：" + getOptionValue("addSel"));
        editOptions("addSel", "新文本", "新Value"); //注意：不傳value值的時候 value值默認為text的值
        alert("新文本：" + getOptionText("addSel") + "   新Value：" + getOptionValue("addSel"));
      })
    })

    //動態(tài)創(chuàng)建帶id的select
    function createSelect(id) {
      $("body").append("<select id="+id+"></select>");
    }

    //根據(jù)select的id 添加選項option
    function addOption(selectID,value,text) {
      //根據(jù)id查找select對象， 
      var obj = $("#" + selectID + "");
      $("<option></option>").val(value).text(text).appendTo(obj);
    }

    //根據(jù)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);
    }

    //根據(jù) index 值刪除一個選項option
    function removeOneByIndex(selectID, index) {
      var obj = $("#" + selectID + " option[index=" + index + "]");
      obj.remove();
    }

    //根據(jù) value值刪除一個選項option
    function removeOneByValue(selectID, text) {
      var obj = $("#" + selectID + " option[value=" + text + "]");
      obj.remove();
    }

    //****************以驗證不可以根據(jù)text值取得option元素***********************
    //根據(jù)text值刪除一個選項option  感覺不可用 真的
    //function removeOneByText(selectID, text) {
    //var obj = $("#" + selectID + " option[text=" + text + "]");
    //obj.remove();
    //}
    //****************以驗證不可以根據(jù)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實現(xiàn)代碼
何為頁面 Mask (遮罩)？看過 jQuery 的 Lightbox 插件的一定不會陌生。就是在頁面上建一個透明層遮蓋住頁面的全部內(nèi)部。
2010-01-01
深入了解query和params的使用區(qū)別
這篇文章主要介紹了深入了解query和params的使用區(qū)別，路由傳參的時候，有倆兄弟，一個叫query，一個叫parmas，你說他們倆長得也不像吧，可這用法實在是太類似了，下面就讓我們分別從vue路由和Node接收兩個角度講他們的區(qū)別,需要的朋友可以參考下
2019-06-06
jquery簡單的彈出層浮動層代碼
一個簡單的jquery彈出框代碼實現(xiàn)，點擊鏈接彈出模式對話框，任意點擊網(wǎng)頁的其它地方可以關閉彈出框，可以自定義透明度，簡單實用的jquery彈出框效果。
2015-04-04
jquery插件制作自增長輸入框?qū)崿F(xiàn)代碼
本章我們將創(chuàng)建一個自增長的輸入框插件，jquery.aotogrow.js
2012-08-08
使用異步controller與jQuery實現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實現(xiàn)卷簾式分頁，使用異步controller與jQuery按需加載內(nèi)容，當用戶開始通過網(wǎng)站的內(nèi)容滾動時進一步加載內(nèi)容。,需要的朋友可以參考下
2019-06-06
節(jié)點的插入之a(chǎn)ppend()和appendTo()的用法介紹
說到節(jié)點的插入想必大家對append()和appendTo()的用法并不陌生吧，下面有個不錯的是，希望對大家學習有所幫助
2014-01-01
jQuery插件pagewalkthrough實現(xiàn)引導頁效果
這篇文章主要介紹了jQuery插件pagewalkthrough實現(xiàn)引導頁效果的方法和示例代碼，十分的詳細和實用，有需要的小伙伴可以參考下。
2015-07-07
jQuery實現(xiàn)圖片局部放大鏡效果
這篇文章主要介紹了jQuery實現(xiàn)圖片局部放大鏡效果的相關資料,需要的朋友可以參考下
2016-03-03
jQuery從零開始做一個分頁組件功能示例
這篇文章主要介紹了jQuery從零開始做一個分頁組件功能,結合實例形式分析了jQuery分頁組件的具體步驟、功能實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
2020-05-05
分享15個大家都熟知的jquery小技巧
這篇文章主要分享了15個大家都熟知的jquery小技巧，幫助提高你jQuery應用的簡單小技巧，感興趣的小伙伴們可以參考一下
2015-12-12