熟悉一下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. 6.1、Android Studio的Android Monitor概览

    Android Monitor帮助你监测你的应用的性能,以帮助你合理的进行优化,调试,提升.如下功能: 1. Log消息,系统定义的或者开发者定义的. 2. 内存,CPU和GPU使用情况. 3. 网络 ...

  2. Android仿淘宝购物车demo

    夏的热情渐渐退去,秋如期而至,丰收的季节,小编继续着实习之路,走着走着,就走到了购物车,逛过淘宝或者是京东的小伙伴都知道购物车里面的宝贝可不止一件,对于爱购物的姑娘来说,购物车里面的商品恐怕是爆满,添 ...

  3. 使用Geolocation校正GDAL不支持的数据

    对于低分数据来说,常用的校正方式就是给定数据的经纬度查找表来进行校正.在GDAL中,这种校正方式叫Geolocation array.常用的数据有国外的MODIS数据,国内的如风云系列(FY)和海洋系 ...

  4. Qzone React Native改造

    Android Qzone 6.1版本在情侣空间涉水React Native,以动态插件方式将情侣空间进行React Natived的改造.在情侣空间基础上,Android Qzone 6.2版本以融 ...

  5. 04 SimpleAdapter

    <span style="font-size:18px;">package com.fmyboke; import java.util.ArrayList; impor ...

  6. 【IOS 开发】Object - C 语法 之 流程控制

    1. if 条件语句 if 表达式 : 表达式是一个 整型 或者 布尔型, 0 或者 FALSE 为 FALSE, 大于 0 为 TRUE; 代码示例 : /********************* ...

  7. [Redmine] Centos5上安装Redmine3.0+nginx+thin部署

    项目管理的需要所以安装Redmine,其实wiki放在上面也不错的. 首先是安装,ruby应用第一次装,把坑记住. nginx, mysql是已经安装好的,只需要配置, 结合nginx的部署方式很多, ...

  8. hive中与hbase外部表join时内存溢出（hive处理mapjoin的优化器机制）

    与hbase外部表(wizad_mdm_main)进行join出现问题: CREATE TABLE wizad_mdm_dev_lmj_edition_result as select *  from ...

  9. 如何启用Oracle EBS Form监控

    前言: 有时候,因某些需要,必须知道Oracle的Form被使用的情况,以方面我们做出决策: 例如,如果某个Form被使用的次数非常多,那么,这个Form的相关SQL代码就应该优先处理,以减少服务器负 ...

  10. 利用HTP工具包开发报表

    利用这种方式的优点是不需要跑请求就可以打印报表 工具包中常用程序说明 htp.print 语法   htp.print (cbuf | dbuf | nbuf); 作用   generates a l ...