Javascript 操作select控制項(新增、修改、刪除、選中、清空、判斷存在等)

來源:互聯網
上載者:User

1.判斷select選項中 是否存在Value="paraValue"的Item
 2.向select選項中 加入一個Item
 3.從select選項中 刪除一個Item
 4.刪除select中選中的項
 5.修改select選項中 value="paraValue"的text為"paraText"
 6.設定select中text="paraText"的第一個Item為選中
 7.設定select中value="paraValue"的Item為選中
 8.得到select的當前選中項的value
 9.得到select的當前選中項的text
10.得到select的當前選中項的Index
11.清空select的項

 

Js代碼
  1. js 代碼   
  2. // 1.判斷select選項中 是否存在Value="paraValue"的Item           
  3. function jsSelectIsExitItem(objSelect, objItemValue) {           
  4.     var isExit = false;           
  5.     for (var i = 0; i < objSelect.options.length; i++) {           
  6.         if (objSelect.options[i].value == objItemValue) {           
  7.             isExit = true;           
  8.             break;           
  9.         }           
  10.     }           
  11.     return isExit;           
  12. }            
  13.       
  14. // 2.向select選項中 加入一個Item           
  15. function jsAddItemToSelect(objSelect, objItemText, objItemValue) {           
  16.     //判斷是否存在           
  17.     if (jsSelectIsExitItem(objSelect, objItemValue)) {           
  18.         alert("該Item的Value值已經存在");           
  19.     } else {           
  20.         var varItem = new Option(objItemText, objItemValue);         
  21.         objSelect.options.add(varItem);        
  22.         alert("成功加入");        
  23.     }           
  24. }           
  25.       
  26. // 3.從select選項中 刪除一個Item           
  27. function jsRemoveItemFromSelect(objSelect, objItemValue) {           
  28.     //判斷是否存在           
  29.     if (jsSelectIsExitItem(objSelect, objItemValue)) {           
  30.         for (var i = 0; i < objSelect.options.length; i++) {           
  31.             if (objSelect.options[i].value == objItemValue) {           
  32.                 objSelect.options.remove(i);           
  33.                 break;           
  34.             }           
  35.         }           
  36.         alert("成功刪除");           
  37.     } else {           
  38.         alert("該select中 不存在該項");           
  39.     }           
  40. }       
  41.       
  42.       
  43. // 4.刪除select中選中的項       
  44. function jsRemoveSelectedItemFromSelect(objSelect) {           
  45.     var length = objSelect.options.length - 1;       
  46.     for(var i = length; i >= 0; i--){       
  47.         if(objSelect[i].selected == true){       
  48.             objSelect.options[i] = null;       
  49.         }       
  50.     }       
  51. }         
  52.       
  53. // 5.修改select選項中 value="paraValue"的text為"paraText"           
  54. function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {           
  55.     //判斷是否存在           
  56.     if (jsSelectIsExitItem(objSelect, objItemValue)) {           
  57.         for (var i = 0; i < objSelect.options.length; i++) {           
  58.             if (objSelect.options[i].value == objItemValue) {           
  59.                 objSelect.options[i].text = objItemText;           
  60.                 break;           
  61.             }           
  62.         }           
  63.         alert("成功修改");           
  64.     } else {           
  65.         alert("該select中 不存在該項");           
  66.     }           
  67. }           
  68.       
  69. // 6.設定select中text="paraText"的第一個Item為選中           
  70. function jsSelectItemByValue(objSelect, objItemText) {               
  71.     //判斷是否存在           
  72.     var isExit = false;           
  73.     for (var i = 0; i < objSelect.options.length; i++) {           
  74.         if (objSelect.options[i].text == objItemText) {           
  75.             objSelect.options[i].selected = true;           
  76.             isExit = true;           
  77.             break;           
  78.         }           
  79.     }                 
  80.     //Show出結果           
  81.     if (isExit) {           
  82.         alert("成功選中");           
  83.     } else {           
  84.         alert("該select中 不存在該項");           
  85.     }           
  86. }           
  87.       
  88. // 7.設定select中value="paraValue"的Item為選中       
  89. document.all.objSelect.value = objItemValue;       
  90.           
  91. // 8.得到select的當前選中項的value       
  92. var currSelectValue = document.all.objSelect.value;       
  93.           
  94. // 9.得到select的當前選中項的text       
  95. var currSelectText = document.all.objSelect.options   
  96.   
  97. [document.all.objSelect.selectedIndex].text;       
  98.           
  99. // 10.得到select的當前選中項的Index       
  100. var currSelectIndex = document.all.objSelect.selectedIndex;       
  101.           
  102. // 11.清空select的項       
  103. document.all.objSelect.options.length = 0;     
js 代碼// 1.判斷select選項中 是否存在Value="paraValue"的Item        function jsSelectIsExitItem(objSelect, objItemValue) {            var isExit = false;            for (var i = 0; i < objSelect.options.length; i++) {                if (objSelect.options[i].value == objItemValue) {                    isExit = true;                    break;                }            }            return isExit;        }            // 2.向select選項中 加入一個Item        function jsAddItemToSelect(objSelect, objItemText, objItemValue) {            //判斷是否存在            if (jsSelectIsExitItem(objSelect, objItemValue)) {                alert("該Item的Value值已經存在");            } else {                var varItem = new Option(objItemText, objItemValue);              objSelect.options.add(varItem);             alert("成功加入");         }        }           // 3.從select選項中 刪除一個Item        function jsRemoveItemFromSelect(objSelect, objItemValue) {            //判斷是否存在            if (jsSelectIsExitItem(objSelect, objItemValue)) {                for (var i = 0; i < objSelect.options.length; i++) {                    if (objSelect.options[i].value == objItemValue) {                        objSelect.options.remove(i);                        break;                    }                }                alert("成功刪除");            } else {                alert("該select中 不存在該項");            }        }          // 4.刪除select中選中的項    function jsRemoveSelectedItemFromSelect(objSelect) {            var length = objSelect.options.length - 1;        for(var i = length; i >= 0; i--){            if(objSelect[i].selected == true){                objSelect.options[i] = null;            }        }    }         // 5.修改select選項中 value="paraValue"的text為"paraText"        function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {            //判斷是否存在            if (jsSelectIsExitItem(objSelect, objItemValue)) {                for (var i = 0; i < objSelect.options.length; i++) {                    if (objSelect.options[i].value == objItemValue) {                        objSelect.options[i].text = objItemText;                        break;                    }                }                alert("成功修改");            } else {                alert("該select中 不存在該項");            }        }           // 6.設定select中text="paraText"的第一個Item為選中        function jsSelectItemByValue(objSelect, objItemText) {                //判斷是否存在            var isExit = false;            for (var i = 0; i < objSelect.options.length; i++) {                if (objSelect.options[i].text == objItemText) {                    objSelect.options[i].selected = true;                    isExit = true;                    break;                }            }                  //Show出結果            if (isExit) {                alert("成功選中");            } else {                alert("該select中 不存在該項");            }        }           // 7.設定select中value="paraValue"的Item為選中    document.all.objSelect.value = objItemValue;           // 8.得到select的當前選中項的value    var currSelectValue = document.all.objSelect.value;           // 9.得到select的當前選中項的text    var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;           // 10.得到select的當前選中項的Index    var currSelectIndex = document.all.objSelect.selectedIndex;           // 11.清空select的項    document.all.objSelect.options.length = 0;   

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.