form中的select控件当select内容改变,页面根据select的值显示不同的内容,该如何实现?

如题,而且select中的内容是从数据库中读出,自动生成的!!!!!拜托各位
---------------------------------------------------------------

 1<html>
 2<head>
 3<title> showOrderTitle </title>
 4<script language="JavaScript">   
 5<!--   
 6function optionItem(v, t) {   
 7  
 8this.value = v;   
 9this.text = t;   
10return this;   
11}   
12  
13var optionItems = new Array();   
14optionItems[0] = new optionItem("0", "选项0");   
15optionItems[1] = new optionItem("1", "选项1");   
16optionItems[2] = new optionItem("2", "选项2");   
17optionItems[3] = new optionItem("3", "选项3");   
18optionItems[4] = new optionItem("4", "选项4");   
19optionItems[5] = new optionItem("5", "选项5");   
20optionItems[6] = new optionItem("6", "选项6");   
21optionItems[7] = new optionItem("7", "选项7");   
22optionItems[8] = new optionItem("8", "选项8");   
23  
24  
25function addOption(v, t) {   
26  
27var objSelect = document.all.mySelect;   
28var pos = objSelect.selectedIndex;   
29var objOption = new Option(t, v);   
30var fieldExist = false;   
31var i = 0;   
32for (i=0; i < objSelect.options.length; i++) {   
33if (objSelect.options[i].value == v) {   
34fieldExist = true;   
35alert("“" + v + "("+t+")”字段已经存在");   
36break;   
37}   
38}   
39if (!fieldExist) {   
40if (pos == -1 ¦ ¦ pos > objSelect.options.length) {objSelect.options[objSelect.options.length] = objOption;}   
41else {objSelect.add(objOption, pos);}   
42}   
43for (i=0; i<objSelect.options.length; i++) {objSelect.options[i].selected=false;}   
44}   
45  
46function deleteOption(type) {   
47  
48var objSelect = document.all.mySelect;   
49for (var i = 0; i < objSelect.options.length; i++) {   
50if (objSelect.options[i].selected == true) {   
51if (type == true) {objSelect.options[i] = null;}   
52else {objSelect.remove(i);}   
53i--;   
54}   
55}   
56}   
57  
58//-->   
59</script>
60</head>
61<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
62<script language="JavaScript">   
63<!--   
64document.write('<select size=' + (optionItems.length+1) + ' multiple name="mySelect">');   
65for (i = 0; i < optionItems.length; i++) {   
66document.write('<option value="' + optionItems[i].value + '">' + optionItems[i].text + '</option>');   
67}   
68document.write('</select>');   
69//-->   
70</script>
71<br/><br/>
72<a href="javascript:deleteOption(true)">删除选中的项</a>
73<br/><br/>   
74加入项的值 <input name="v" type="text"/>   
75加入项的显示文字 <input name="t" type="text"/>
76<a href="javascript:addOption(v.value, t.value)">在选中项之前添加项</a>
77</body>
78</html>

---------------------------------------------------------------

 1<html>
 2<head>
 3<script language="javascript">   
 4function change(obj) {   
 5alert(obj.options[obj.selectedIndex].text);   
 6}   
 7</script>
 8</head>
 9<body>
10<select name="select1" onchange="change(this)">
11<option>aaa</option>
12<option>bbb</option>
13<option>ccc</option>
14<option>ddd</option>
15</select>
16</body>
17</html>

---------------------------------------------------------------

当select改变,激发的是onchange事件;
select的当前选项,可以用select的selectedIndex属性来判断,其值是整型数字,从0开始;
options是select各选项的集合,同样,从0开始;
一般根据选项来改变值是通过判断option的value来实现的(当然,也可以通过其他途径)。

知道了以上几点,实现起来就很容易了,如:

1<select onchange="xxx=this.options[this.selectedIndex].value">...</select>

就是很常见的一个写法,变化一下,就实现你的目的了。

-------------------------------------------------------------------
无忧脚本临时论坛:http://51js.webucn.net
---------------------------------------------------------------

select设置成onchange="change()";
function change()
{
formname.submit();
}
然后页面就会根据变量的值重新发送资料
---------------------------------------------------------------

1   
2......   
3dim optionlist   
4while not rs.eof   
5optionlist=optionlist& "

<option "="" """"="" "selected"="" &="" end="" if="" name='rs("danyuan")' optionlist="optionlist&amp;" rs("danyuan")="" then="" trim(rs("danyuan"))="trim(danyuan)" value="">" &amp; rs("danyuan") &amp; "</option>

1"   
2rs.movenext   
3wend   
4......   
1<script language="javascript">   
2function jumpMenu(targ,selObj,restore){   
3ss="?danyuan="+document.form1.danyuan.value;   
4//alert(ss);   
5eval(targ+".location='"+ "```
6=myself
7```" + ss+"'");   
8}   
9</script>

...

1<select name="danyuan" onchange="jumpMenu('self',this,0)" size="1">
2<option>單元</option>   

=optionlist

1</select>

---------------------------------------------------------------

 1<html>
 2<head><title>dd</title>
 3<script language="javascript">   
 4function changeText(str)   
 5{   
 6var obj=eval("document.all."+str);   
 7var i= document.all.form1.sel.value;   
 8if (i==1)   
 9obj.innerText="232323";   
10else if (i==2)   
11obj.innerText="1121212";   
12else   
13obj.innerText="^_^";   
14}   
15  
16</script>
17</head>
18<body>
19<table>
20<tr><td id="td1">sdfsf</td></tr></table>
21<form name="form1">
22<select name="sel" onchange="changeText(document.all.td1.id)">
23<option value="1">1</option>
24<option value="2">2</option>
25<option value="3">3</option>
26</select>
27</form></body>
28</html>

v

Published At
Categories with Web编程
comments powered by Disqus