熟悉一下js对select元素的操作，html页面中建立一个form，其中包含一个select元素和submit按钮。

当选择select中某一项时改变其文字，当select中所有项的文字都改变后，重新恢复它们。

当按下submit时关闭窗口本身，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>duang for select elements</title>
<script type="text/javascript">
    function do_change(elt){
        var text = elt[elt.selectedIndex].innerHTML;
        if(!text.match(/\[/))
            elt[elt.selectedIndex].innerHTML += " [duang]";
        var is_all_seleted = true;
        for(var i=0;i<elt.length;++i){
            if(!elt[i].innerHTML.match(/\[/)){
                is_all_seleted = false;
                break;
            }
        }
        if(is_all_seleted){
            alert("all duang!!!\nand reset it!!!");
            for(var i=0;i<elt.length;++i){
                elt[i].innerHTML = elt[i].innerHTML.replace(/\s\[.*\]/,"")
            }
        }
    }
</script>
</head>
<body>
    <form id="frm_main" action="#" method="post">
        <select id="slt" onchange="do_change(this);">
            <option value="opt_1">opt A</option>
            <option value="opt_2">opt B</option>
            <option value="opt_3">opt C</option>
            <option value="opt_4">opt D</option>
            <option value="opt_5">opt E</option>
        </select>
        <input type="submit" value="close window" onclick="window.close();" />
    </form>
</body>
</html>

在firefox中一开始貌似无法关闭窗口本身，后来发现在about:config中设置dom.allow_scripts_to_close_windows为true即可。

如果每个select中的选项变化没有规律，则可以写一个on_change_ex来处理，代码如下：

function do_change_ex(me){
        var text = me[me.selectedIndex].innerHTML;
        if(!text.match(/\[/)){
            me[me.selectedIndex].text_bak = me[me.selectedIndex].innerHTML;
            me[me.selectedIndex].innerHTML += " [duang]";
            me[me.selectedIndex].is_changed = true;
        }
        var is_all_seleted = true;
        for(var i=0;i<me.length;++i){
            if(!me[i].is_changed){
                is_all_seleted = false;
                break;
            }
        }
        if(is_all_seleted){
            alert("all duang!!!\nand reset it!!!");
            for(var i=0;i<me.length;++i){
                me[i].innerHTML = me[i].text_bak;
                me[i].is_changed = false;
            }
        }
    }

javascript操作select元素一例的更多相关文章

  1. 使用javaScript操作页面元素

    from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...

  2. javascript操作HTML元素

    操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标 ...

  3. 使用JavaScript获取select元素选中的value和text

    示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...

  4. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  5. javaScript的select元素和option的相关操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Python3 Selenium自动化web测试 ==> 第五节 WebDriver高级应用 -- 使用JavaScript操作页面元素

    学习目的: 中级水平技术提升 在WebDriver脚本代码中执行JS代码,可以解决某些 .click()方法无法生效等问题 正式步骤: Python3代码如下 # -*- coding:utf-8 - ...

  7. webdriver高级应用-使用JavaScript操作页面元素

    Webdriver搞不定的,需要用js,无需引入有关js的包就可用 在WebDriver脚本代码中执行JavaScript代码,来实现对页面元素的操作.此方法主要用于解决在某些情况下,页面元素的.cl ...

  8. JavaScript操作select下拉框选项移动

    运行结果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  9. 【转】javascript操作Select标记中options集合

    先来看看options集合的这几个方法:options.add(option)方法向集合里添加一项option对象:options.remove(index)方法移除options集合中的指定项:op ...

随机推荐

  1. 在Linux环境下实现一个非常好的bash脚本框架

    为了方便我日常工作中的编译环境,免去我敲命令行所浪费的时间,我个人写了一个非常有用而又简单的脚本框架,该框架即可以完成的工程源码编译,也可以清除,拷贝等等操作,具体需要开发者自己来实现细节,我的框架思 ...

  2. FFmpeg源代码简单分析：日志输出系统（av_log()等）

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  3. UNIX网络编程——带外数据

    许多传输层有带外数据的概念,它有时也称为经加速数据.其想法是一个连接的某端发生了重要的事情,而且该端希望迅速通告其对端.这里"迅速"意味着这种通知应该在已排队等待发送的任何&quo ...

  4. Android性能优化之加快应用启动速度

    应用的启动 启动方式 通常来说,在安卓中应用的启动方式分为两种:冷启动和热启动. 1.冷启动:当启动应用时,后台没有该应用的进程,这时系统会重新创建一个新的进程分配给该应用,这个启动方式就是冷启动. ...

  5. 【一天一道LeetCode】#98. Validate Binary Search Tree

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  6. 多进程log4cxx区分日志

    多进程log4cxx区分日志 (金庆的专栏) 网游客户端一般会多开,多个进程会写同一个日志文件.log4cxx看来会对文件加锁,防止多进程写同一文件写乱,截止目前还没发现错乱的日志. log4cxx有 ...

  7. 03_Android项目中读写文本文件的代码

    编写一下Android界面的项目 使用默认的Android清单文件 <?xml version="1.0" encoding="utf-8"?> & ...

  8. C++11：使用 auto/decltype/result_of使代码可读易维护

    C++11 终于加入了自动类型推导.以前,我们不得不使用Boost的相关组件来实现,现在,我们可以使用"原生态"的自动类型推导了! C++引入自动的类型推导,并不是在向动态语言(强 ...

  9. 文件I/O实践(3) --文件共享与fcntl

    文件共享 一个进程打开了两个文件 文件表条目(file-table-entry): 1.文件状态标志(file-status-flags): 读/写/追加/同步/非阻塞等; 2.当前文件偏移量 3.v ...

  10. Linux 中环境变量设置

    本文主要整理自以下博文: .bash_profile和.bashrc的什么区别及启动过程 linux环境变量设置方法总结(PATH/LD_LIBRARY_PATH) .bash_profile 和 . ...