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

  • 相关阅读:
    python基础5之装饰器
    python基础4之递归、lambda、深浅copy
    python基础3之文件操作、字符编码解码、函数介绍
    python基础1之python介绍、安装、变量和字符编码、数据类型、输入输出、数据运算、循环
    python基础2之字符串、列表、字典、集合
    Mysql主从复制的实现
    LNMP一键安装脚本
    LNMP搭建(CentOS 6.3+Nginx 1.2.0+PHP 5.3.15(fpm)+ MySQL 5.5.35)
    整合apache+tomcat+keepalived实现高可用tomcat集群
    浅谈CSRF
  • 原文地址:https://www.cnblogs.com/liaoshiyong/p/3150917.html
Copyright © 2011-2022 走看看