熟悉一下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. FORM中读取图片

    1.创建ITEM 重要属性如下 item属性:图像 大小样式:调整 数据库项:否 2.读取触发器 在block级别,创建trigger READ_IMAGE_FILE('D:\'||:XX_EMOLY ...

  2. RocketMQ,JStorm与Tair使用笔记

    关于RocketMQ 启动mq nohup sh mqnamesrv -n 10.150.0.94:9876 &  nohup sh mqbroker -n 10.150.0.94:9876 ...

  3. 14 Fragment的V4包的使用

    activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...

  4. [ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39209533 官方例子:http://docs.sencha.com/extjs/5. ...

  5. Linux下which、whereis、locate、find 命令查找文件

     转自:http://blog.csdn.net/gh320/article/details/17411743 我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索 ...

  6. UNIX网络编程——非阻塞connect

    当在一个非阻塞的TCP套接字上调用connect时,connect将立即返回一个EINPROGRESS错误,不过已经发起的TCP三次握手继续进行.我们接着使用select检测这个连接或成功或失败的已建 ...

  7. Android的TabHost组件-android的学习之旅（四十）

    TabHost简介 虽然,官方建议用Fagment取代TabHost,但是我们还是大概的介绍一下.TabHost是一种非常简单的组件,TabHost可以很方便的在窗口放置多个标签页,每一个标签页相当于 ...

  8. HMAC

    Hash-based Message Authentication Code HMAC是IP安全里必须实现的MAC方案,并且其他Internet协议中(如SSL)也使用了HMAC.HMAC已作为NIS ...

  9. UE4利用Save Game创建全局变量

    因为盲目的做了一个UE4的项目,没有用到UE4的无缝加载,我只能在一个个关卡中手动切换,然后每次的数据都会重置,这对于项目来说,造成了体验感的极度下降. 然而我查了一下怎样在UE4中创建全局变量,找到 ...

  10. A*寻路算法入门(三)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...