返回目录
更多资源请访问>>>BK设计资讯站(Www.Blue1000.Com)Www.Blue1000.Com
主要解答:zhangZhongYu
感谢:zhangZhongYu、kadina、zz315、zalvsa、freekite、scfobao
审核者:fason
form中的select控件当select内容改变,页面根据select的值显示不同的内容,该如何实现?
-----------------------------------------------------------------------------------------
如题,而且select中的内容是从数据库中读出,自动生成的!!!!!拜托各位
---------------------------------------------------------------
<html>
<head>
<title> showOrderTitle </title>
<script language="JavaScript">
<!--
function optionItem(v, t) {
this.value = v;
this.text = t;
return this;
}
var optionItems = new Array();
optionItems[0] = new optionItem("0", "选项0");
optionItems[1] = new optionItem("1", "选项1");
optionItems[2] = new optionItem("2", "选项2");
optionItems[3] = new optionItem("3", "选项3");
optionItems[4] = new optionItem("4", "选项4");
optionItems[5] = new optionItem("5", "选项5");
optionItems[6] = new optionItem("6", "选项6");
optionItems[7] = new optionItem("7", "选项7");
optionItems[8] = new optionItem("8", "选项8");
function addOption(v, t) {
var objSelect = document.all.mySelect;
var pos = objSelect.selectedIndex;
var objOption = new Option(t, v);
var fieldExist = false;
var i = 0;
for (i=0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == v) {
fieldExist = true;
alert("“" + v + "("+t+")”字段已经存在");
break;
}
}
if (!fieldExist) {
if (pos == -1 ¦ ¦ pos > objSelect.options.length) {objSelect.options[objSelect.options.length] = objOption;}
else {objSelect.add(objOption, pos);}
}
for (i=0; i<objSelect.options.length; i++) {objSelect.options[i].selected=false;}
}
function deleteOption(type) {
var objSelect = document.all.mySelect;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].selected == true) {
if (type == true) {objSelect.options[i] = null;}
else {objSelect.remove(i);}
i--;
}
}
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="JavaScript">
<!--
document.write('<select size=' + (optionItems.length+1) + ' multiple name="mySelect">');
for (i = 0; i < optionItems.length; i++) {
document.write('<option value="' + optionItems[i].value + '">' + optionItems[i].text + '</option>');
}
document.write('</select>');
//-->
</script>
<br><br>
<a href="javascript:deleteOption(true)">删除选中的项</a>
<br><br>
加入项的值 <input type=text name=v>
加入项的显示文字 <input type=text name=t>
<a href="javascript:addOption(v.value, t.value)">在选中项之前添加项</a>
</body>
</html>
---------------------------------------------------------------
<HTML>
<HEAD>
<script language="javascript">
function change(obj) {
alert(obj.options[obj.selectedIndex].text);
}
</script>
</HEAD>
<BODY>
<select name="select1" onChange="change(this)">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
<option>ddd</option>
</select>
</BODY>
</HTML>
---------------------------------------------------------------
当select改变,激发的是onchange事件;
select的当前选项,可以用select的selectedIndex属性来判断,其值是整型数字,从0开始;
options是select各选项的集合,同样,从0开始;
一般根据选项来改变值是通过判断option的value来实现的(当然,也可以通过其他途径)。
知道了以上几点,实现起来就很容易了,如:<select onchange="xxx=this.options[this.selectedIndex].value">...</select>就是很常见的一个写法,变化一下,就实现你的目的了。
-------------------------------------------------------------------
无忧脚本临时论坛:http://51js.webucn.net
---------------------------------------------------------------
select设置成onchange="change()";
function change()
{
formname.submit();
}
然后页面就会根据变量的值重新发送资料
---------------------------------------------------------------
<%
......
dim optionlist
while not rs.eof
optionlist=optionlist& "<option value=""" & rs("danyuan") & """"
if trim(rs("danyuan"))=trim(danyuan) then
optionlist=optionlist& "selected"
name=rs("danyuan")
end if
optionlist=optionlist& ">" & rs("danyuan") & "</option>"
rs.movenext
wend
......
%>
<script language=javascript>
function jumpMenu(targ,selObj,restore){
ss="?danyuan="+document.form1.danyuan.value;
//alert(ss);
eval(targ+".location='"+ "<%=myself%>" + ss+"'");
}
</script>
...
<select size="1" name="danyuan" onChange="jumpMenu('self',this,0)" >
<option>單元</option>
<%=optionlist%>
</select>
---------------------------------------------------------------
<html>
<head><title>dd</title>
<script language="javascript">
function changeText(str)
{
var obj=eval("document.all."+str);
var i= document.all.form1.sel.value;
if (i==1)
obj.innerText="232323";
else if (i==2)
obj.innerText="1121212";
else
obj.innerText="^_^";
}
</script>
</head>
<body>
<table>
<tr><td id="td1">sdfsf</td></tr></table>
<form name="form1">
<select name="sel" onchange="changeText(document.all.td1.id)">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
</body>
</html>v
返回目录