熟悉一下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. （一二三）基于GCD的dispatch_once实现单例设计

    要实现单例,关键是要保证类的alloc和init只被调用一次,并且被自身强引用防止释放. 近日读唐巧先生的<iOS开发进阶>,受益匪浅,通过GCD实现单例就是收获之一,下面把这个方法与大家 ...

  2. springMVC系列之（三） spring+springMVC集成(annotation方式)

    个人认为使用框架并不是很难,关键要理解其思想,这对于我们提高编程水平很有帮助.不过,如果用都不会,谈思想就变成纸上谈兵了!!!先技术,再思想.实践出真知. 1.基本概念 1.1.Spring Spri ...

  3. RecyclerView下拉刷新上拉加载（三）—对Adapter的封装

    RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...

  4. 安卓自定义日期控件(仿QQ,IOS7)续

    本篇是在原来的基础上修改了界面效果,使其更加接近ios7,qq等日期选择控件,看图: 源码地址:http://download.csdn.net/detail/baiyuliang2013/87601 ...

  5. Win 10 下 android studio显示 Intel haxm无法安装，以及VT-X和hyper-x的冲突问题

               我 的电脑是神舟战神k650c i7 D4,处理器是Intel core i7 4710-MQ,系统是win 10的 我心血来潮想学习一下安卓开发,就首先安装了android s ...

  6. JEECG&Dubbo Demo

    jeecg框架service与dao层类图 吴水成Dubbo Demo项目架构图

  7. gradle2.0笔记——让项目升级到gradle2.0

    昨晚看到QQ群消息说gradle2.0发布了,今天去看了一下,确实是昨天发布的,为rc版本:Gradle 2.0-rc-2.于是决定试一下. gradle可以在官网上下载,地址如下:http://ww ...

  8. （七十三）iOS本地推送通知的实现

    iOS的推送通知分为本地推送和网络推送两种,如果App处于挂起状态,是可以发送本地通知的,如果已经被杀掉,则只有定时通知可以被执行,而类似于QQ的那种网络消息推送就无法实现了,因为App的网络模块在被 ...

  9. awk：快速入门（简单实用19例+鸟哥书内容）

    awk 用法:awk ' pattern {action} '  变量名 含义  ARGC 命令行变元个数  ARGV 命令行变元数组  FILENAME 当前输入文件名  FNR 当前文件中的记录号 ...

  10. 今日成为CSDN认证专家

    认证时写的申请材料: 程序猿一枚毕业于南开工作于上海.喜欢读书,喜欢跑步,激情似火,心静如水. 喜欢编程,喜欢寻根问底各种技术,喜欢在各种新技术中汲取营养. 喜欢分享,因此以一些高质量的博文来回报各位 ...