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;
分享到:
相关推荐
本文将详细介绍如何使用JavaScript对`<select>`控件进行各种操作,包括新增选项、修改选项、删除选项、选中特定选项、清空所有选项以及判断某个值的选项是否存在。 ### 一、判断选项是否存在 使用以下函数可以检查...
以下是一些基本的方法,涵盖了从新增、修改、删除到选中和清空Select选项等常见需求: 1. **判断Select选项中是否存在指定Value的Item** 使用`jsSelectIsExitItem`函数,你可以检查给定的Value是否已经在Select中...
操作select控件是前端开发中常见的任务,包括但不限于新增选项、修改选项、删除选项、选中某个选项、清空选项以及判断某个特定值的选项是否存在等。以下是这些操作的知识点详细说明: 1. 判断select选项中是否存在...
js 操作 select 控件大全是 JavaScript 中对 select 控件的各种操作的集合,包括新增、修改、删除、选中、清空、判断存在等多种操作。下面将对这些操作进行详细的介绍和讲解。 一、 判断 select 选项中是否存在 ...
本文将详细讲解如何通过 JavaScript 动态地添加、修改和删除 `<select>` 元素中的选项。 #### 描述:Javascript 操作 select 是表单中常见的一种,删除多个 select 值时出现的问题及解决方案 在处理 `<select>` ...
本文将详细介绍如何使用JavaScript来操作这个控件,包括新增、删除、修改、选中和清空选项,以及判断特定选项是否存在的方法。 1. **判断select选项中是否存在指定Value的Item** ```javascript function ...
JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,能够对用户交互进行响应,处理动态内容。以下是一些JS学习的关键知识点: 1. 输出语句:`document.write("")` 用于在HTML文档中输出...
30. **下拉列表**:`document.forms[0].selectName.options[n].value`获取下拉列表中选项的值,`selectedIndex`用于确定被选中的项。 31. **字符串创建**:使用`new String("text")`创建一个新的字符串对象。 32. ...
**SelectPage v2.4** 是一个强大的下拉分页选择插件,它在最新版本中引入了两个关键特性:纯下拉列表功能和关闭分页功能。这个插件旨在提供一个多功能、易于操作的选择器,支持自动化补全、键盘导航、分页以及标签...
在Vue.js框架中,动态添加或删除对象和对象数组是常见的需求,特别是在处理表单数据、列表展示等场景。本文将详细讲解如何在Vue项目中实现这一功能。 首先,我们来看一下添加对象到对象数组的核心代码: ```...
-Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和...
-Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和...
在本文中,我们将探讨如何利用Bootstrap Table实现一些通用的功能,如时间控件、数据导出、动态下拉框、表单验证以及选中与获取信息的方法。 1. **单击单行选中** Bootstrap Table 提供了`click-row.bs.table`事件...