【www.hj8828.com】javascript操作select成分实例剖判

当按下submit时关闭窗口本身,代码如下:

javascript操作select元素实例分析

 这篇文章主要介绍了javascript操作select元素的方法,可实现针对select元素选中元素时动态改变html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

 

 

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

这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮。

当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢复它们。

当按下submit时关闭窗口本身,代码如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!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来处理,代码如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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操作select元素的方法,可实现针对select元素选中元素时动态改变html元素的技巧,具…

在firefox中一开始貌似无法关闭窗口本身,后来发现在about:config中设置dom.allow_scripts_to_close_windows为true即可。

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • 努比亚Z9Mini怎么截屏
  • xp系统如何删除平时用不上的系统输入法教程
  • Mac彻底关闭开机声音操作方法
  • Windows7系统电脑出现蓝屏该怎么处理?
  • 微商按照这3步操作朋友圈不被屏蔽
  • 针对宝贝上下架的三种操作方法

相关频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮。

帮客评论

duang for select elements function do_change{ var text = elt[elt.selectedIndex].innerHTML; if elt[elt.selectedIndex].innerHTML += " [duang]"; var is_all_seleted = true; for(var i=0;i&lt;elt.length;++i){ if(!elt[i].innerHTML.match{ is_all_seleted = false; break; } } if{ alert("all duang!!!\nand reset it!!!"); for(var i=0;i&lt;elt.length;++i){ elt[i].innerHTML = elt[i].innerHTML.replace } } }