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

Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]

程序员文章站 2023-12-03 10:27:16
js 代码 // 1.判断select选项中 是否存在value="paravalue"的item function jsselectisexititem(objselec...
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;