Javascript 操作select控件-控件新闻-慧都网

Javascript 操作select控件

翻译|其它|编辑：郝浩|2007-08-29 09:03:18.000|阅读 1272 次

概述：

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

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 的项

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