提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js动态改变select选择变更option的index值示例

JS 示例 动态 选择 改变 index SELECT option
2023-06-13 09:15:37 时间 
document.getElementById("louyuming").options[0].selected=true;

functionjsSelectIsExitItem(objSelect,objItemValue){
varisExit=false;
for(vari=0;i<objSelect.options.length;i++){
if(objSelect.options[i].value==objItemValue){
isExit=true;
break;
}
}
returnisExit;
}

Javascript操作select是表单中常见的一种，今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再删除索引小的，否则删除了索引小的后索引大的索引就变化了，再删除时就会出现问题－－问题的关键是for循环是要从大到小，而不是常规的从0到length）

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

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

======================================================================

动态删除select中的所有options：

functiondeleteAllOptions(sel){
sel.options.length=0;
}

动态删除select中的某一项option：

functiondeleteOption(sel,indx){
sel.options.remove(indx);
}

动态添加select中的项option:

functionaddOption(sel,text,value){
sel.options.add(newOption(text,value));
}

上面在IE和FireFox都能测试成功，希望以后可以用上。

===========================================

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为选中
objSelect.value=objItemValue;

//8.得到select的当前选中项的value
varcurrSelectValue=objSelect.value;

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

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

//11.清空select的项
objSelect.options.length=0;

整个实例的完整代码如下：

<!doctypehtmlpublic"-//w3c//dtdhtml4.0transitional//en">
<html>
<head>
<title>javascriptselectoptionstextvalue</title>
<metaname="keywords"content="javascriptselectoptionstextvalueaddmodifydeleteset">
<metaname="description"content="javascriptselectoptionstextvalueaddmodifydeleteset">
<scriptlanguage="javascript">
<!--
//Author:i@lxl.cn
//Modify:i@cnlei.com
functionwatch_ini(){//初始
for(vari=0;i<arguments.length;i++){
varoOption=newOption(arguments[i],arguments[i]);
document.getElementById("MySelect")[i]=oOption;
}
}
functionwatch_add(f){//增加
varoOption=newOption(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}
functionwatch_sel(f){//编辑
f.word.value=f.keywords[f.keywords.selectedIndex].text;
}
functionwatch_mod(f){//修改
f.keywords[f.keywords.selectedIndex].text=f.word.value;
}
functionwatch_del(f){//删除
f.keywords.remove(f.keywords.selectedIndex);
}
functionwatch_set(f){//保存
varset="";
for(vari=0;i<f.keywords.length;i++){
set+=f.keywords[i].text+";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<formname="watch"method="post"action="">
<selectid="MySelect"name="keywords"size="10"onchange="watch_sel(this.form)"></select><br>
<scriptlanguage="javascript">
<!--
watch_ini("我","你","??","他","她","它","尔");//初始关键词
//-->
</script>
<inputtype="text"name="word"/><br/>
<inputtype="button"value="增加"onclick="watch_add(this.form);"/>
<inputtype="button"value="修改"onclick="watch_mod(this.form);"/>
<inputtype="button"value="删除"onclick="watch_del(this.form);"/>
<inputtype="button"value="保存"onclick="watch_set(this.form);"/>
</form>
</body>
</html>

相关文章