`
chengxj_1986
  • 浏览: 6531 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

JavaScript select 操作

阅读更多

判断select选项中 是否存在Value="paraValue"的Item
向select选项中 加入一个Item
从select选项中 删除一个Item
删除select中选中的项
修改select选项中 value="paraValue"的text为"paraText"
设置select中text="paraText"的第一个Item为选中
设置select中value="paraValue"的Item为选中
得到select的当前选中项的value
得到select的当前选中项的text
得到select的当前选中项的Index
清空select的项
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; 


分享到:
评论

相关推荐

    Javascript Select操作大集合

    除了上述基本操作外,还有一些其他与Select相关的JavaScript操作,如: - **获取选中项的值**:可以通过`selTarget.options[selTarget.selectedIndex].value`获取当前选中的Option的值。 - **设置选中项**:使用`...

    JavaScript操作select大全

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

    javascript操作Select标记中options集合

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

    Javascript 操作select控件大全

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

    Javascript 操作select下拉框

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

    JavaScript模拟select

    ### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中,有时我们需要对浏览器原生的`&lt;select&gt;`元素进行定制化处理,比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...

    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_操作详解.txt

    ### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时,经常需要检测用户是否已选择了某个 `&lt;select&gt;` 元素中的 `&lt;option&gt;` 项。以下是一个简单的示例来实现这一功能: ```javascript ...

    Javascript操作Select和Option

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

    select元素javascript常用操作

    结合JavaScript,我们可以实现对`&lt;select&gt;`元素的动态操作,增强用户体验,实现更复杂的交互功能。下面将详细介绍在JavaScript中对`&lt;select&gt;`元素进行的常见操作。 ### 1. 检查`&lt;select&gt;`元素中是否存在特定值的项 ...

    JavaScript对Select的操作.doc

    本文将深入探讨如何使用JavaScript来操作Select及其内部的Option。 1. **动态创建 Select** 使用`document.createElement("select")`可以创建一个新的`&lt;select&gt;`元素。接着通过`id`属性设置其唯一标识,并用`...

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

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

    javascript操作select元素实例分析

    JavaScript操作select元素是一个非常实用的前端技能,它可以通过用户与下拉菜单的交互来改变页面上的内容或行为,从而提升用户体验。下面将详细介绍如何使用JavaScript来操作select元素,并通过实例分析来说明其具体...

    javascript 操作两个select,左右选择值。

    在JavaScript编程中,操作HTML元素,特别是Select元素,是常见的需求。这个场景中,我们讨论的是如何实现一个功能,让用户可以在两个Select下拉框之间移动选择的值,这种功能常见于多选设置或者数据迁移的界面。下面...

    [转]Jquery操作select 收藏

    文件"jQuery-Select-bynet.htm"可能就是一个示例代码或插件的文档,它可能包含了更高级的select操作示例,如模拟多级联动下拉菜单或者自定义的下拉列表样式。 总的来说,掌握jQuery操作select的方法对于前端开发来...

    [JavaScript]Javascript 设置与读取Co 三级select列表

    要实现这个功能,JavaScript提供了DOM操作接口,包括`document.getElementById()`、`document.createElement()`、`element.appendChild()`等,用于获取或创建DOM元素,并进行添加、删除、修改等操作。例如,当用户在...

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

    在JavaScript中操作`&lt;select&gt;`控件是网页开发中常见的需求,涉及到增、删、查、改等操作。本文将详细介绍如何使用JavaScript对`&lt;select&gt;`控件进行各种操作,包括新增选项、修改选项、删除选项、选中特定选项、清空...

Global site tag (gtag.js) - Google Analytics