`
kt431128
  • 浏览: 39288 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Js操作Select大全

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

相关推荐

    JavaScript操作select大全

    ### JavaScript操作select大全 在网页开发中,`&lt;select&gt;`元素是用于创建下拉列表的常用HTML标签之一。本文档提供了详细的JavaScript操作`&lt;select&gt;`元素的方法,包括判断选项是否被选中、增删改选项及其属性等实用...

    Js操作Select大全(取值、设置选中等等)

    ### Js操作Select大全知识点详解 #### 一、概述 JavaScript(简称JS)是网页开发中不可或缺的一部分,尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`&lt;select&gt;`...

    js操作select大全 转

    根据给定的信息,本文将对JavaScript操作`&lt;select&gt;`元素的方法进行详细介绍,这些方法涵盖了创建、选择、删除选项等操作。 ### 1. 检查`&lt;select&gt;`元素是否存在值为`paraValue`的项 ```javascript function ...

    Js操作Select大全.doc

    以上是JavaScript操作`&lt;select&gt;`标签的一些基本方法。在实际开发中,这些功能可能会作为更复杂交互的基础,例如动态加载数据、响应用户事件等。了解并熟练掌握这些操作,对于提升网页的交互性和用户体验至关重要。

    Javascript 操作select控件大全

    Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等

    js操作select控件大全

    js 操作 select 控件大全是 JavaScript 中对 select 控件的各种操作的集合,包括新增、修改、删除、选中、清空、判断存在等多种操作。下面将对这些操作进行详细的介绍和讲解。 一、 判断 select 选项中是否存在 ...

    js 操作select和option

    &lt;title&gt;JS 操作 Select 和 Option &lt;script language="JavaScript"&gt; function $(id) { return document.getElementById(id); } function show() { var selectObj = $("area"); var myOption = document....

    jquery操作select大全

    ### jQuery操作Select大全知识点详解 #### 1. 概述 jQuery操作Select大全主要包含了一系列使用jQuery操作select下拉列表的方法和实例。在Web开发过程中,动态地与select元素进行交互是常见的需求,jQuery为此提供...

    js操作select相关方法

    以上代码展示了JavaScript操作`select`元素的一些常见方法。首先,`jsSelectIsExitItem`函数用于检查`select`中是否存在指定`value`的选项。如果存在,它将返回`true`,否则返回`false`。接着,`jsAddItemToSelect`...

    javascript 操作表单select的常用步骤

    ### JavaScript操作表单Select元素的常用步骤 在Web开发中,`&lt;select&gt;`标签用于创建一个下拉列表供用户选择选项。使用JavaScript可以方便地控制这些下拉列表的行为,例如添加、删除或修改选项等。下面详细介绍如何...

    html最全的js javascript操作select 下拉框

    根据给定的文件标题、描述、标签以及部分内容,本文将深入解析HTML中使用JavaScript操作`&lt;select&gt;`下拉框的全面方法。`&lt;select&gt;`元素是网页表单中用于创建下拉列表的关键部分,而通过JavaScript,我们可以动态地添加...

    javascript操作Select标记中options集合

    这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。以下是关于这个主题的一些关键知识点: 1. **DOM操作**:在JavaScript中,我们可以使用DOM(Document ...

    Javascript 操作select下拉框

    ### JavaScript 操作 Select 下拉框的关键知识点 在 Web 开发中,`&lt;select&gt;` 元素用于创建下拉列表(或选择框)。这些选择框在用户界面中非常常见,可以用来收集用户输入的信息,比如让用户从一系列选项中选择一个...

    select2.mim.js and select2.min.css.zip

    `select2.min.js`是JavaScript文件的最小化版本,用于减少页面加载时间;而`select2.min.css`则是CSS文件的最小化版本,负责样式呈现。这两个文件应当在HTML页面中正确引用,以便Select2库正常工作。 在实际应用中...

    JavaScript操作select&&table

    ### JavaScript操作select&&table #### 一、JavaScript操作Select元素 在Web开发中,`&lt;select&gt;`元素用于创建下拉列表。通过JavaScript可以对这些下拉列表进行动态操作,包括添加选项、删除选项、获取选中的值等。...

    Javascript操作Select和Option

    Javascript操作Select和Option 一个网页 挺全的

    js之Select用法

    2. **通过JavaScript操作`select`元素** - 获取`select`元素:可以使用`document.getElementById('mySelect')`或`document.querySelector('#mySelect')`来获取`select`元素。 - 添加/删除选项: - 添加选项:`...

Global site tag (gtag.js) - Google Analytics