document.getElementById("louyuming").options[0].selected=true;

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;        
}

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

// 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;    
         }    
     }    
}

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: 
function deleteAllOptions(sel){ 
sel.options.length=0; 

动态删除select中的某一项option: 
function deleteOption(sel,indx){ 
sel.options.remove(indx); 

动态添加select中的项option: 
function addOption(sel,text,value){ 
sel.options.add(new Option(text,value)); 

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

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

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为选中    
objSelect.value = objItemValue;    
       
// 8.得到select的当前选中项的value    
var currSelectValue = objSelect.value;    
       
// 9.得到select的当前选中项的text    
var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text;    
       
// 10.得到select的当前选中项的Index    
var currSelectIndex = objSelect.selectedIndex;    
       
// 11.清空select的项    
objSelect.options.length = 0;

整个实例的完整代码如下

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
   var oOption=new Option(arguments[i],arguments[i]);
   document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
   var oOption=new Option(f.word.value,f.word.value);
   f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>
</body>
</html>

JS动态改变select选择变更option的index值的更多相关文章

  1. js动态获取select选中的option

    最近在写报表管理模块时,需要通过条件去筛选符合条件的数据,筛选条件用的布局有select,input等.在调试的过程中一直获取不到select选中的option.于是就查询些资料,发现用select的 ...

  2. js动态创建 select选择框

    document.body.onclick = function(){ if(document.getElementById('vselect') === null){ document.body.i ...

  3. 【jquery】ajax 动态 改变 select下拉框选中的值

    //JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...

  4. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  5. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  6. js动态改变下拉框内容

    今天为大家分享一篇js动态设置select下拉菜单的默认选中项实例,具有很好的参考价值,希望对大家有所帮助. 代码实例如下: <!DOCTYPE html> <html lang=& ...

  7. js动态改变iframe的高度

    js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200"   ...

  8. 小程序中监听textarea或者input输入的值动态改变data中数组的对象的值

    Page({ data: { todoLists:[ { detail:"", date:"", location:"", priority ...

  9. JS动态获取select中被选中的option的值,并在控制台输出

    生活城市: <select id="province"> <option>河南省</option> <option>黑龙江省< ...

随机推荐

  1. 好久没有写过SQL了,今天写了一句select in留存

    应同事要求,直接去接数据库的数据. 数据C里有一个name是查询的起始. 然后,B其实是一个多对多的中间表, 通过B查出id之后, 就可以在A里找到需要的数据了. select name from A ...

  2. 集合栈计算机(UVa12096)

    题目具体描述见:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...

  3. 【LOJ】 #2025. 「JLOI / SHOI2016」方

    题解 有什么LNOI啊,最后都是JLOI罢了 一道非常--懵逼的统计题 当然是容斥,所有的方案 - 至少有一个点坏掉的正方形 + 至少有两个点坏掉的正方形 - 至少有三个点坏掉的正方形 + 至少有四个 ...

  4. USACO 4.3 Buy Low, Buy Lower

    Buy Low, Buy Lower The advice to "buy low" is half the formula to success in the stock mar ...

  5. Mysql安装(绿色版安装)

    一:下载 1.官网 https://dev.mysql.com/ 2.下载 3.下载 二:安装 1.将官网上下载的包进行解压 2.以管理员的身份运行DOS安装 进入mysql的bin目录 运行mysq ...

  6. poj2387 Til the Cows Come Home(Dijkstra)

    题目链接 http://poj.org/problem?id=2387 题意 有n个路标,编号1~n,输入路标编号及路标之间相隔的距离,求从路标n到路标1的最短路径(由于是无向图,所以也就是求从路标1 ...

  7. "characterEncoding" must end with the ';' delimiter.

    17/04/20 17:27:10 FATAL conf.Configuration: error parsing conf file:/usr/local/apache-hive-1.2.2-bin ...

  8. 创建 python 虚拟环境

    conda 创建环境 conda 可以理解为一个工具,也是一个可执行命令,其核心功能是包管理与环境管理.包管理与 pip 的使用类似,环境管理则允许用户方便地安装不同版本的 python 并可以快速切 ...

  9. nginx启动 [emerg] 12180#12948: invalid number of arguments in "root" directive in D:

    注意空格和中文符号 修改了就可以了. 还要注意最后需要加分号; https://blog.csdn.net/rodulf/article/details/53557278

  10. python opencv3 基于ORB的特征检测和 BF暴力匹配 knn匹配 flann匹配

    git:https://github.com/linyi0604/Computer-Vision bf暴力匹配: # coding:utf-8 import cv2 """ ...