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

JS操作select相关方法

 
阅读更多
1.判断select选项中 是否存在Value="paraValue"的Item
2.向select选项中 加入一个Item
3.从select选项中 删除一个Item
4.修改select选项中 value="paraValue"的text为"paraText"
5.设置select中text="paraText"的第一个Item为选中
6.设置select中value="paraValue"的Item为选中
7.得到select的当前选中项的value
8.得到select的当前选中项的text
9.得到select的当前选中项的Index
10.清空select的项
-------------------------------------------
//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[objSelect.options.length] = varItem;
         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选项中 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中 不存在该项");
     }  
}


//5.设置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中 不存在该项");
     }  
}

//6.设置select中value="paraValue"的Item为选中
//document.all.objSelect.value = objItemValue;

//7.得到select的当前选中项的value
//var currSelectValue = document.all.objSelect.value;

//8.得到select的当前选中项的text
//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

//9.得到select的当前选中项的Index
//var currSelectIndex = document.all.objSelect.selectedIndex;

//10.清空select的项
// document.all.objSelect.options.length = 0;
分享到:
评论

相关推荐

    js操作select相关方法

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

    js控制select相关方法

    以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明: 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现,检查每个选项的`...

    js 操作select相关方法函数

    关于JavaScript操作select元素的相关方法和函数,以下是详细的解说: 1. 判断select选项中是否存在value为指定值的项 要判断select元素中是否存在一个特定的value值的选项,可以通过遍历select元素的options集合来...

    Javascript 操作select控件大全

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

    js操作select控件大全

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

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中,`&lt;select&gt;` 元素是一种常见的表单控件,用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript,我们可以实现...

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

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

    JavaScript操作select大全

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

    js操作select大全 转

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

    javascript操作Select标记中options集合

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

    Javascript 操作select下拉框

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

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

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

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

    本文将详细介绍Select2及其相关文件`select2.min.js`和`select2.min.css`,以及它们如何在项目中发挥重要作用。 Select2是一款强大的JavaScript库,它能够将普通的HTML `&lt;select&gt;`元素转变为功能丰富的选择器。通过...

    JavaScript操作select&&table

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

    javascript 操作表单select的常用步骤

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

    Javascript操作Select和Option

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

    Js操作Select大全.doc

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

Global site tag (gtag.js) - Google Analytics