javascript操作select元素实例分析


Posted in Javascript onMarch 27, 2015

本文实例讲述了javascript操作select元素的用法。分享给大家供大家参考。具体分析如下:

这里熟悉一下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程序设计有所帮助。

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
javascript实现文件拖拽事件
Mar 29 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 #Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 #Javascript
jquery使用animate方法实现控制元素移动
Mar 27 #Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 #Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 #Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 #Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 #Javascript
You might like
建立动态的WML站点(二)
2006/10/09 PHP
oracle资料库函式库
2006/10/09 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
求职信范文英文版
2014/01/05 职场文书
营销与策划专业求职信
2014/06/20 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
业余无线电通联Q语
2022/02/18 无线电
MongoDB数据库之添删改查
2022/04/26 MongoDB