Javascript 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的项
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;

时间: 2024-09-29 10:41:51

Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)_表单特效的相关文章

Javascript操作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;

js监听表单value的修改同步问题,跨浏览器支持_表单特效

想要实现的功能大概是这样的: 有两个文本框,其中一个只读,另一个可以输入.要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现提示信息,实时显示只读文本框的内容. 这个功能看是简单,但其实并没有想象的那么简单.(注意,可输入框的处理没什么可讨论的,关键是只读框的处理) 一开始,我们一般会想到在只读文本框上运用onchange事件.一试,发现onchange根本没用,该事件是在文本框获得焦点,然后内容改变失去焦点后才触发的,现在在只读文本框上根本没有这些,它的内容是通过

JQuery select控件操作使用总结

JQuery获取和设置Select选项方法汇总如下: 获取select 先看看下面代码: $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text var checkValue=$("#s

在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题_表单特效

发现的问题可能会陆续添加 1. Mozilla和Opera都不支持该字体,改掉DTD也是没有效果.测试在Mozilla Firefox1.5, Opera9.0下都是显示成Arial字体.而特殊符号是支持的. 如: <body id="www.never-online.net"> <div style="font-family:Webdings">6</div> <div>▼</div> </body

定义select的边框颜色_表单特效

  具体步骤:     1.用margin属性实现.先设置margin属性为-2,以隐藏select对象原来的边框,然后设置select对象的父对象的边框. <span style="border:1px solid #333333;width:80"> <select style="margin:-2;width:84;background:#eeeeee">  <option value="1">1<

默认让页面的第一个控件选中的javascript代码_表单特效

当页面上面显示了一个表单后,通常焦点 并不是放在第一个控件上面,只需要一点通常的脚本就可以实现这个效果 . document.forms[0].elements[0].focus(); 如果页面的第一个控件是隐藏字段,或是不支持focus() 上面这段javascript 可能就会出现错误 ! 复制代码 代码如下: var formutil = new Object; formutil.focusOnfirst = function() { if(document.forms.length>0)

javascript Select标记中options操作方法集合_表单特效

javascript操作Select标记中options集合 先来看看options集合的这几个方法: options.add(option)方法向集合里添加一项option对象: options.remove(index)方法移除options集合中的指定项: options(index)或options.item(index)可以通过索引获取options集合的指定项: javascript代码如下: var selectTag = null; //select标记 var OPTONLEN

validator验证控件使用代码_表单特效

下面是js代码(在绑定对象的时候感觉很不优雅,希望高人能指点一二啊!) 复制代码 代码如下: function validator(obj,option){//验证对象 var self = this; if(!(self instanceof validator)) return new validator(obj,option); self.source={'mobile':'^(13|14|15|18)[0-9]{9}$','postcode':'^\\d{6}$','integer':'

File文件控件,选中文件(图片,flash,视频)即立即预览显示_表单特效

我们平常用file文件控件上传文件,要预览有时会刷新页面,结果file控件被清空,好多人问能能让他不清空或重新赋值,因为处于安全性的考虑,这是不可能的.那怎么进行无刷新预览呢?这里我把我所使用的方法写一下. 选择页面:  复制代码 代码如下: <script language="javascript"> function checkData() { var fileName=document.getElementById("FileUp").value;