`

Js操作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
functionjsSelectIsExitItem(objSelect,objItemValue){
varisExit=false;
for(vari=0;i<objSelect.options.length;i++){
if(objSelect.options[i].value==objItemValue){
isExit
=true;
break;
}

}

returnisExit;
}


//2.向select选项中加入一个Item
functionjsAddItemToSelect(objSelect,objItemText,objItemValue){
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue)){
alert(
"该Item的Value值已经存在");
}
else{
varvarItem=newOption(objItemText,objItemValue);
objSelect.options.add(varItem);
alert(
"成功加入");
}

}


//3.从select选项中删除一个Item
functionjsRemoveItemFromSelect(objSelect,objItemValue){
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue)){
for(vari=0;i<objSelect.options.length;i++){
if(objSelect.options[i].value==objItemValue){
objSelect.options.remove(i);
break;
}

}

alert(
"成功删除");
}
else{
alert(
"该select中不存在该项");
}

}



//4.删除select中选中的项
functionjsRemoveSelectedItemFromSelect(objSelect){
varlength=objSelect.options.length-1;
for(vari=length;i>=0;i--){
if(objSelect[i].selected==true){
objSelect.options[i]
=null;
}

}

}


//5.修改select选项中value="paraValue"的text为"paraText"
functionjsUpdateItemToSelect(objSelect,objItemText,objItemValue){
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue)){
for(vari=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为选中
functionjsSelectItemByValue(objSelect,objItemText){
//判断是否存在
varisExit=false;
for(vari=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
varcurrSelectValue=document.all.objSelect.value;

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

//10.得到select的当前选中项的Index
varcurrSelectIndex=document.all.objSelect.selectedIndex;

//11.清空select的项
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