熟悉一下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. SQL 数据库语言分析总结（二）

    介绍sql语言 我们接着一的顺序继续介绍这个语言 数据类型 整形: TINYINT(8位) SMALLINT(16位) MEDIUMINT(24位) INT(32位) BIGINT(64位) 实数: ...

  2. android 获取SD卡的图片及其路径

    1.首先是intent的设置: private static final int IMAGECODE = 0; Intent imageIntent = new Intent(Intent.ACYIO ...

  3. javascript之事件模型

    事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:D ...

  4. Android开发学习之路--Broadcast Receiver之初体验

    学习了Activity组件后,这里再学习下另一个组件Broadcast Receiver组件.这里学习下自定义的Broadcast Receiver.通过按键自己发送广播,然后自己接收广播.新建MyB ...

  5. love~LBJ，奥布莱恩神杯3

    时间:2016年6月20日8:00:地点:美国金州甲骨文(Oracle)球馆:事件:G7大战,又一次见证伟大赛季奥布莱恩神杯得主--金州勇士VS克利夫兰骑士......     可以说,这是NBA以来 ...

  6. 根据CSS的class选择DOM

    // 网上参考的,自己修改了一部分 // 代码如下,纯JS,要求浏览器支持 getElementsByClassName 方法 <script type="text/javascrip ...

  7. Linux Debugging（六）: 动态库注入、ltrace、strace、Valgrind

    实际上,Linux的调试方法非常多,针对不同的问题,不同的场景,不同的应用,都有不同的方法.很难去概括.本篇文章主要涉及本专栏还没有涵盖,但是的确有很重要的方法.本文主要包括动态库注入调试:使用ltr ...

  8. Cocos2D:塔防游戏制作之旅(一)

    原文地址:http://www.raywenderlich.com/37701/how-to-make-a-tower-defense-game-tutorial 由Pablo Ruiz写的入门教程, ...

  9. 怎样写一个与Windows10 IE11兼容的标准BHO？

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...

  10. mysql的基本使用命令

    启动:net start mySql; 进入:mysql -u root -p/mysql -h localhost -u root -p databaseName; 列出数据库:show datab ...