zoukankan      html  css  js  c++  java
  • js操作select控件的几种方法发布


    几种js操作select控件的方法,这里基本是整理的比较全了,另外脚本之家特给大家准备了一些相关的文章。让你更深入的了解javascript下select的操作。

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

    functionjsRemoveSelectedItemFromSelect(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为选中

    function check(){

    var c = document.all.objSelect;

    for (var i=0;i<c.options.length ;i++ ){

    if (c.options(i).value==paraValue){

    c.selectedIndex =i;

    }

    }

    }

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

    详细出处参考:http://www.jb51.net/article/23747.htm

  • 相关阅读:
    Oracle基础知识整理
    linux下yum安装redis以及使用
    mybatis 学习四 源码分析 mybatis如何执行的一条sql
    mybatis 学习三 mapper xml 配置信息
    mybatis 学习二 conf xml 配置信息
    mybatis 学习一 总体概述
    oracle sql 语句 示例
    jdbc 新认识
    eclipse tomcat 无法加载导入的web项目,There are no resources that can be added or removed from the server. .
    一些常用算法(持续更新)
  • 原文地址:https://www.cnblogs.com/liaoshiyong/p/3150917.html
Copyright © 2011-2022 走看看