返回目录
  • 更多资源请访问>>>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

    返回目录