Javascript-网页编程-DHTML-下拉框的应用/文件添加

最新推荐文章于 2022-01-18 20:29:39 发布

夏小弥

最新推荐文章于 2022-01-18 20:29:39 发布

阅读量471

点赞数

分类专栏： html网页编程文章标签： javascript dhtml html

本文链接：https://blog.csdn.net/x121850182/article/details/51919631

版权

html网页编程专栏收录该内容

15 篇文章 0 订阅

订阅专栏

下拉框的应用（设置字体颜色、两个下拉框的对应）

引例：

[java]view plaincopy 
    
 <html>  
     <head>  
         <title>DHTML技术演示---radio的使用</title>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
         <style type="text/css">  
             #contentId{  
                 display:none;  
             }  
             ul{  
                 list-style:none;  
                 margin:0px;  
             }  
             .open{  
                 display:block;  
             }  
             .close{  
                 display:none;  
             }  
         </style>  
         <script type="text/javascript">  
             function showContent(oNode){  
                 var showDivContent=document.getElementById("contentId");  
                 /* 
                 if (oNode.value=="yes"){ 
                     showDivContent.style.display="block"; 
                 } else { 
                     showDivContent.style.display="none"; 
                 } 
                 */  
                 with(showDivContent.style){  
                     if (oNode.value=="yes"){  
                         display="block";  
                     } else {  
                         display="none";  
                     }  
                 }  
             }  
             function showResult(){  
                 var value=0;  
                 var topicOneRadioNodes=document.getElementsByName("topicOne");  
                 for (var x=0;x<topicOneRadioNodes.length;x++){  
                     if (topicOneRadioNodes[x].checked){  
                         value=parseInt(topicOneRadioNodes[x].value);  
                         break;  
                     }  
                 }  
                 if (!value){  
                     document.getElementById("topicOneErrorInfo").innerHTML="No selection was selected.".fontcolor("red");  
                     return;  
                 }  
                 document.getElementById("topicOneErrorInfo").innerHTML="";  
                 if (value>0&&value<4){  
                     document.getElementById("res_1").className="open";  
                     document.getElementById("res_2").className="close";  
                 } else {  
                     document.getElementById("res_1").className="close";  
                     document.getElementById("res_2").className="open";  
                 }  
             }  
         </script>  
     </head>  
     <body>  
         <div>  
             Do you want to take part in the questionnaire research?<br/>  
             <input type="radio" name="questionnaire" value="yes" οnclick="showContent(this)">yes  
             <input type="radio" name="questionnaire" value="no" οnclick="showContent(this)">no<br/>  
         </div>  
         <div id="contentId">  
             The content of the questionnaire.<br/>  
             name: <input type="text" name="name"><br/>  
             telephone: <input type="text" name="telephone">  
         </div>  
           
         <hr/>  
         <h2>Welcome to character test</h2>  
         <h3>Topic one</h3>  
         <span>Which fruit below do you like best.</span>  
         <ul id="topicOne">  
             <li><input type="radio" name="topicOne" value="1">Grape</li>  
             <li><input type="radio" name="topicOne" value="2">Watermelon</li>  
             <li><input type="radio" name="topicOne" value="3">Apple</li>  
             <li><input type="radio" name="topicOne" value="4">Mango</li>  
             <li><input type="radio" name="topicOne" value="5">Cherry</li>  
         </ul>  
         <div>  
             <input type="button" value="Show the result" οnclick="showResult()">  
             <div id="res_1" class="close">1 to 3 scores: you are introversion</div>  
             <div id="res_2" class="close">more than 4 scores: you are outgoing</div>  
         </div>  
         <span id="topicOneErrorInfo"></span>  
     </body>  
 </html>  

1、设置字体颜色

[java]view plaincopy 
   
 <html>  
     <head>  
         <title>DHTML技术演示---selcet的使用</title>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
         <style type="text/css">  
             .clrClass{  
                 height:50px;  
                 width:50px;  
                 float:left;  
                 margin-right:30px;  
                 margin-bottom:20px;  
             }  
             #text{  
                 clear:left;  
             }  
         </style>  
         <script type="text/javascript">  
             function changeColor(oDivClrNode){  
                 var colorVal=oDivClrNode.style.backgroundColor;  
                 document.getElementById("text").style.color=colorVal;  
             }  
             function changeColor2(){  
                 var oSelectNode=document.getElementsByName("selectColor1")[0];  
                 var oCollOptions=oSelectNode.options;  
                 var colorValue=oCollOptions[oSelectNode.selectedIndex].value;  
                 document.getElementById("text").style.color=colorValue;  
             }  
             function changeColor3(){  
                 var oSelectNode=document.getElementsByName("selectColor2")[0];  
                 var oCollOptions=oSelectNode.options;  
                 var colorValue=oCollOptions[oSelectNode.selectedIndex].value;  
                 document.getElementById("text").style.color=colorValue;  
             }  
         </script>  
     </head>  
     <body>  
         <div class="clrClass" id="clr1" style="background-color:red" οnclick="changeColor(this)"></div>  
         <div class="clrClass" id="clr2" style="background-color:green" οnclick="changeColor(this)"></div>  
         <div class="clrClass" id="clr3" style="background-color:blue" οnclick="changeColor(this)"></div>  
         <div id="text">  
             显示效果文字1<br/>  
             显示效果文字2<br/>  
             显示效果文字3<br/>  
             显示效果文字4<br/>  
         </div>  
         <hr/>  
         <select name="selectColor1" οnchange="changeColor2()">  
             <option value="black">--请选择颜色--</option>  
             <option value="red">红色</option>  
             <option value="green">绿色</option>  
             <option value="blue">蓝色</option>  
         </select>  
         <hr/>  
         <select name="selectColor2" οnchange="changeColor3()">  
             <option value="black" style="background-color:black">--请选择颜色--</option>  
             <option value="red" style="background-color:red"></option>  
             <option value="green" style="background-color:green"></option>  
             <option value="blue" style="background-color:blue"></option>  
         </select>  
     </body>  
 </html>  

结果：

2、两个下拉框之间的对应

[java]view plaincopy 
   
 <html>  
     <head>  
         <title>DHTML技术演示---selcet的使用</title>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
         <script type="text/javascript">  
             function selectCity(){  
                 var collProvinces ={  
                     "beijing" : ['海淀区','东城区','西城区','朝阳区'],  
                     "zhejiang"     : ['杭州','宁波','金华','温州'],  
                     "hunan"     : ['益阳','长沙','株洲','湘潭'],  
                     "jiangxi"     : ['南昌','九江','萍乡','上饶']  
                 };  
                 var selNode=document.getElementById("provincesId");  
                 var index=selNode.selectedIndex;  
                 var provinceName=selNode.options[index].value;  
                 var arrCities=collProvinces[provinceName];  
                   
                 var cityNode=document.getElementById("citiesId");  
                 cityNode.options.selectedIndex=0;  
                 //把下拉菜单"subselid"中原有的内容清空  
                 //法1  
                 /* 
                 for (var x=1;x<cityNode.length;){//注意，数组删除之后，长度是自动更新的，因此for最后不要用"x++"修正 
                     cityNode.removeChild(cityNode.options[x]); 
                 } 
                 */  
                 //法2  
                 /* 
                 for (var x=cityNode.length-1;x>0;x--){ 
                     cityNode.removeChild(cityNode.options[x]); 
                 } 
                 */  
                 //法3  
                 cityNode.options.length=1;//长度设置为1 ，那么剩余的选项自动被删掉  
                 for (var x=0;x<arrCities.length;x++){  
                     var optionNode=document.createElement("option");  
                     optionNode.innerHTML=arrCities[x];  
                     cityNode.appendChild(optionNode);  
                 }  
             }  
         </script>  
     </head>  
     <body>  
         <select id="provincesId" οnchange="selectCity()">  
             <option>select province</option>  
             <option value="beijing">北京</option>  
             <option value="hunan">湖南</option>  
             <option value="zhejiang">浙江</option>  
             <option value="jiangxi">江西</option>  
         </select>  
         <select id="citiesId">  
             <option>--select city--</option>  
         </select>  
     </body>  
 </html>  

结果：

3、文件添加和删除

[java]view plaincopy 
   
 <html>  
     <head>  
         <title>DHTML技术演示--file组件--添加与删除附件</title>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
         <style type="text/css">  
             table a:link,table a:visited{  
                 text-decoration:none;  
                 color:#ff0000;  
             }  
             table a:hover{  
                 color:#0080ff;  
             }  
         </style>  
         <script type="text/javascript">  
             function addFile(){  
                 var oTableNode=document.getElementById("fileTableId");  
                 var trNode=oTableNode.insertRow();  
                   
                 var tdNode=trNode.insertCell();  
                 tdNode.innerHTML="<input type='file'>";  
                   
                 var tdNodeDel=trNode.insertCell();  
                 //tdNodeDel.innerHTML="<a href='javascript:void(0)' οnclick='deleteFile(this)'>deleteFile</a>";  
                 tdNodeDel.innerHTML="<img src='123.jpg' alt='删除附件' οnclick='deleteFile(this)'>";  
             }  
             function deleteFile(oANode){  
                 var trNode=oANode.parentNode.parentNode;  
                 trNode.parentNode.removeChild(trNode);  
             }  
         </script>  
     </head>  
     <body>  
         <table id="fileTableId">  
             <tr>  
                 <th><a href="javascript:void(0)" οnclick="addFile()">addFile</a></th>  
             </tr>  
             <!--  
             <tr>  
                 <td><input type="file"></td>  
                 <td><a href="javascript:void(0)" οnclick="deleteFile(this)">deleteFile</a></td>  
             </tr>  
             -->  
         </table>  
     </body>  
 </html>  
 
   
 
 
  
  
 

夏小弥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript-网页编程-DHTML-下拉框的应用/文件添加

下拉框的应用（设置字体颜色、两个下拉框的对应）引例：[java] view plain copy DHTML技术演示---radio的使用 "Content-Type" content="text/html; charset=utf-8" /> "text/c
复制链接

扫一扫

专栏目录