zoukankan      html  css  js  c++  java
  • JS操作select相关方法:新增 修改 删除 选中 清空 判断存在

    转自:http://wangyali90516.blog.163.com/blog/static/1172051012010814103146575/

    html select 中 选择某项 - selectedIndex

    <select name="sname" id="test">
      <option value="1" selected>Male</option>
      <option value="2">Famale</option>
    </select>

    想选中Male:
    用document.sname[1].selected=false;是不可以的,selected是只读的。
    应该用document.sname.selectedIndex=1;

    1.判断select选项中 是否存在Value="paraValue"的Item
    2.向select选项中 加入一个Item
    3.从select选项中 删除一个Item
    4.修改select选项中 value="paraValue"的text为"paraText"
    5.设置select中text="paraText"的第一个Item为选中
    6.设置select中value="paraValue"的Item为选中
    7.得到select的当前选中项的value
    8.得到select的当前选中项的text
    9.得到select的当前选中项的Index
    10.清空select的项

    var obj=document.getElementById('ID');

    //
    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[objSelect.options.length] = varItem; 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选项中 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中 不存在该项"); } } 5.设置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中 不存在该项"); } } //6.设置select中value="paraValue"的Item为选中 //document.all.objSelect.value = objItemValue; //7.得到select的当前选中项的value //var currSelectValue = document.all.objSelect.value; //8.得到select的当前选中项的text //var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text; //9.得到select的当前选中项的Index //var currSelectIndex = document.all.objSelect.selectedIndex; //10.清空select的项 // document.all.objSelect.options.length = 0;
  • 相关阅读:
    理解java容器:iterator与collection,容器的起源
    【软件构造】-<笔记>-浅谈java中类的初始化过程
    CSAPP HITICS 大作业 hello's P2P by zsz
    2年经验,java后端必备技术点总结(脑图)
    手把手教,手写AVL树
    Redis源码分析-底层数据结构盘点
    验证mysql事务隔离级别机制加锁情况与MVCC机制
    Layui镜像站
    elasticsearch技术实战——第一篇(使用篇)
    【基础1】JniHelper静态函数和非静态函数的调用
  • 原文地址:https://www.cnblogs.com/zhaoxiaojie/p/3684830.html
Copyright © 2011-2022 走看看