欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-29 17:00:28
1判断select选项中 是否存在value="paravalue"的item 2向select选项中 加入一个item 3从select选项中 删除一个item 4删除s...
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;